晋级TypeScript高手,成为抢手的前端开发人才MK

446 阅读2分钟

Download:百度网盘

提取码:45on

前提:使用TypeScript你需要安装NodeJS支持

然后安装TypeScript:

npm intsall -g typescript 1.  

安装完成后查看版本号:

tsc -v 1.  

新建一个TypeScript文件(hello-typescript.ts):

let message:string = "Hello TypeScript!!!"; console.log(message); 1. 2.  

对这个ts文件编译:

tsc hello-typescript.ts 1.  

编译之后会生成一个javascript文件:

 

再由NodeJS执行这个js文件

node hello-typescript.js 1. 执行结果:

C:\Users\User-Dai\IdeaProjects\Type-Script\ts-01>node ts-test-01.js Hello TypeScript!!! 1. 2.  

其实tsc就是:TypeScript-Compiler

 

【tsc 常用编译参数】 查看帮助信息:

C:\Users\User-Dai\IdeaProjects\Type-Script\ts-01>tsc --help Version 3.9.7 Syntax: tsc [options] [file...]

Examples: tsc hello.ts tsc --outFile file.js file.ts tsc @args.txt tsc --build tsconfig.json

Options: -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', 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' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' '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.stri ng' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' --allowJs Allow javascript files to be compiled. --jsx KIND Specify JSX code generation: 'preserve', 'react-native', or 'react'. -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'. @ Insert command line options and files from a file.

载入扩展模块:

C:\Users\User-Dai\IdeaProjects\Type-Script\ts-01>tsc --module error TS6044: Compiler option 'module' expects an argument. error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'.

设置ECMA版本:

C:\Users\User-Dai\IdeaProjects\Type-Script\ts-01>tsc --target error TS6044: Compiler option 'target' expects an argument. error TS6046: Argument for '--target' option must be: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'.

【TypeScript类与对象】 class Person{ sayName(name):void { console.log("this man, name is " + name); } }

let tom = new Person(); tom.sayName("tom"); 被编译后的JS文件:

var Person = /** @class */ (function () { function Person() { } Person.prototype.sayName = function (name) { console.log("this man, name is " + name); }; return Person; }()); var tom = new Person(); tom.sayName("tom");