学习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
TypeScript 转换为 JavaScript 过程如下图:
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
/fals
e值,在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
类型的变量
版权属于: vincent
转载时须注明出处及本声明