学习Typescript (一)

2021-10-01 Typescript

Typescript是什么

TypeScript 是 JavaScript 的一个超集。它是由微软开发的自由和开源的编程语言。设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。前端学习Typescript逐渐称为趋势。

TypeScript 与 ES5、ES2015 和 ES2016 之间的关系

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译

TypeScript JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误 只能在运行时发现错误
强类型，支持静态和动态类型 弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用
支持模块、泛型和接口 不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等 不支持编译其他 ES3，ES4，ES5 或 ES6

为什么要用Typescript

  • TS提供的类型可以帮助在写代码的时候提供更丰富的语法提示。
  • 在创建前的编译阶段经过类型系统的检查，就可以避免很多线上的错误.

安装Typescript

使用淘宝镜像源 

npm config set registry https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

下载 

npm install -g typescript

npm install -g typescript

检查安装状态

安装完成之后使用tsc来查看相关命令：

 -h, --help                                         Print this message.
 -w, --watch                                        Watch input files.
 --pretty                                           Stylize errors and messages using color and context (experimental).
 --all                                              Show all compiler options.
 -v, --version                                      Print the compiler's version.
 --init                                             Initializes a TypeScript project and creates a tsconfig.json file.
 -p FILE OR DIRECTORY, --project FILE OR DIRECTORY  Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
 -b, --build                                        Build one or more projects and their dependencies, if out of date
 -t VERSION, --target VERSION                       Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'.
 -m KIND, --module KIND                             Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
 --lib                                              Specify library files to be included in the compilation.
                                                      'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 'es2018' 'es2019' 'es2020' 'es2021' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'webworker.iterable' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asyncgenerator' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.sharedmemory' 'es2020.string' 'es2020.symbol.wellknown' 'es2020.intl' 'es2021.promise' 'es2021.string' 'es2021.weakref' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' 'esnext.weakref'
 --allowJs                                          Allow javascript files to be compiled.
 --jsx KIND                                         Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'.
 -d, --declaration                                  Generates corresponding '.d.ts' file.
 --declarationMap                                   Generates a sourcemap for each corresponding '.d.ts' file.
 --sourceMap                                        Generates corresponding '.map' file.
 --outFile FILE                                     Concatenate and emit output to single file.
 --outDir DIRECTORY                                 Redirect output structure to the directory.
 --removeComments                                   Do not emit comments to output.
 --noEmit                                           Do not emit outputs.
 --strict                                           Enable all strict type-checking options.
 --noImplicitAny                                    Raise error on expressions and declarations with an implied 'any' type.
 --strictNullChecks                                 Enable strict null checks.
 --strictFunctionTypes                              Enable strict checking of function types.
 --strictBindCallApply                              Enable strict 'bind', 'call', and 'apply' methods on functions.
 --strictPropertyInitialization                     Enable strict checking of property initialization in classes.
 --noImplicitThis                                   Raise error on 'this' expressions with an implied 'any' type.
 --alwaysStrict                                     Parse in strict mode and emit "use strict" for each source file.
 --noUnusedLocals                                   Report errors on unused locals.
 --noUnusedParameters                               Report errors on unused parameters.
 --noImplicitReturns                                Report error when not all code paths in function return a value.
 --noFallthroughCasesInSwitch                       Report errors for fallthrough cases in switch statement.
 --types                                            Type declaration files to be included in compilation.
 --esModuleInterop                                  Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
 @<file>

 -h, --help                                         Print this message.
 -w, --watch                                        Watch input files.
 --pretty                                           Stylize errors and messages using color and context (experimental).
 --all                                              Show all compiler options.
 -v, --version                                      Print the compiler's version.
 --init                                             Initializes a TypeScript project and creates a tsconfig.json file.
 -p FILE OR DIRECTORY, --project FILE OR DIRECTORY  Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
 -b, --build                                        Build one or more projects and their dependencies, if out of date
 -t VERSION, --target VERSION                       Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'.
 -m KIND, --module KIND                             Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
 --lib                                              Specify library files to be included in the compilation.
                                                      'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 'es2018' 'es2019' 'es2020' 'es2021' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'webworker.iterable' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asyncgenerator' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.sharedmemory' 'es2020.string' 'es2020.symbol.wellknown' 'es2020.intl' 'es2021.promise' 'es2021.string' 'es2021.weakref' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' 'esnext.weakref'
 --allowJs                                          Allow javascript files to be compiled.
 --jsx KIND                                         Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'.
 -d, --declaration                                  Generates corresponding '.d.ts' file.
 --declarationMap                                   Generates a sourcemap for each corresponding '.d.ts' file.
 --sourceMap                                        Generates corresponding '.map' file.
 --outFile FILE                                     Concatenate and emit output to single file.
 --outDir DIRECTORY                                 Redirect output structure to the directory.
 --removeComments                                   Do not emit comments to output.
 --noEmit                                           Do not emit outputs.
 --strict                                           Enable all strict type-checking options.
 --noImplicitAny                                    Raise error on expressions and declarations with an implied 'any' type.
 --strictNullChecks                                 Enable strict null checks.
 --strictFunctionTypes                              Enable strict checking of function types.
 --strictBindCallApply                              Enable strict 'bind', 'call', and 'apply' methods on functions.
 --strictPropertyInitialization                     Enable strict checking of property initialization in classes.
 --noImplicitThis                                   Raise error on 'this' expressions with an implied 'any' type.
 --alwaysStrict                                     Parse in strict mode and emit "use strict" for each source file.
 --noUnusedLocals                                   Report errors on unused locals.
 --noUnusedParameters                               Report errors on unused parameters.
 --noImplicitReturns                                Report error when not all code paths in function return a value.
 --noFallthroughCasesInSwitch                       Report errors for fallthrough cases in switch statement.
 --types                                            Type declaration files to be included in compilation.
 --esModuleInterop                                  Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
 @<file>

编译ts文件

命令 tsc + 文件名

echo const str1: string = 'vincent' >   01.ts

tsc 01.ts

echo const str1: string = 'vincent' >   01.ts

tsc 01.ts

//ts
const str: string = "vincent";
//编译后的js=>01.js
var str1 = 'vincent';

//ts
const str: string = "vincent";
//编译后的js=>01.js
var str1 = 'vincent';

编译tsc 01.ts

image.png image.png

TypeScript 转换为 JavaScript 过程如下图： image.png

Typescript 数据类型

基本类型

String类型

使用string表示文本数据类型。 和JavaScript一样，可以使用双引号"或单引号' `表示字符串。

const str: string = 'vincent';
const name: string = 'chen';
const fullname: string = `${str} ${name}`;

const str: string = 'vincent';
const name: string = 'chen';
const fullname: string = `${str} ${name}`;

Boolean类型

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。

const isY: boolean = false;

const isY: boolean = false;

Number类型

TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

Array类型

有两种方式可以定义数组。

  • 第一种可以在元素类型后面接上[]，表示由此类型元素组成的一个数组
  • 第二种方式是使用数组泛型，Array<元素类型>

// 在元素类型后面加上[]
const arr1: number[] = [1, 2];

// 或者使用数组泛型
const arr2: Array<number> = [1, 2];



// 在元素类型后面加上[]
const arr1: number[] = [1, 2];

// 或者使用数组泛型
const arr2: Array<number> = [1, 2];

Enum 类型

元组 Tuple

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

// Declare a tuple type
let x: [string, number];
x = ['vincent', 1]; // OK
x = [1, 'vincent']; // Error

// Declare a tuple type
let x: [string, number];
x = ['vincent', 1]; // OK
x = [1, 'vincent']; // Error

任意值 any

用来表示允许赋值给任意类型

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let name: string = 'vincent'
name = 9;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

let name: string = 'vincent'
name = 9;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

如果是任意类型的， 则允许被赋值为任意类型

let name: any = 'vincent'
name = 3

let name: any = 'vincent'
name = 3
任意类型的属性和方法

在任意类型上访问任意属性都是被允许的

let myName: any = 'vincent'
console.log(myName.name);
console.log(myName.name.firstName);

let myName: any = 'vincent'
console.log(myName.name);
console.log(myName.name.firstName);

也允许调用任何方法

let myName: any = 'vincent';
myName.setName('chen')
myName.setName('yi')
myName.name.setName('vincent chen')

let myName: any = 'vincent';
myName.setName('chen')
myName.setName('yi')
myName.name.setName('vincent chen')

可以理解为，声明一个变量为任意值后，对它的任何操作，返回的内容的类型都是任意值。

未声明类型的变量

变量如果在声明的时候，没有指定其类型，那么它会被识别为任意值类型。

let name;
name = 'vincent'
name = 4
name.setName('vincent')

let name;
name = 'vincent'
name = 4
name.setName('vincent')

参考 参考

空值 void

javascript 中没有空值的概念，在TS中可以使用void表示没有任何返回值的函数

function sayHello(): void{
  console.log('hello')
}

function sayHello(): void{
  console.log('hello')
}

Null 和 Undefined

在TS中可以使用null和undefined来定义这个原始类型的数据

let age: undefined = undefined;
let name: null = null;

let age: undefined = undefined;
let name: null = null;

与void的区别是，undefined和null是所有类型的子类型。也就意味着undefined类型的变量，可以赋值给number类型的变量。

let num1: number = undefined;

let u: undefined;
let num2: number = u;

let num1: number = undefined;

let u: undefined;
let num2: number = u;

而void类型的变量不能够赋值给number类型的变量

typescript文档

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Typescript
···