typescript產(chǎn)自微軟，是Javascript的超集,。
樓上這句話后半部分聽(tīng)不懂沒(méi)有關(guān)系,，下面跟ataola一起通過(guò)一些具體實(shí)例和思考,，來(lái)一起學(xué)習(xí)一下typescript吧,！ 一,、為何要學(xué)習(xí)typescript 這里我們不得不先說(shuō)下Javascript,，它由ECMAScript,、DOM、BOM組成,。上古石器時(shí)代,，那個(gè)時(shí)候的上古程序員不需要考慮太多，大多數(shù)都是靜態(tài)寫(xiě)死的頁(yè)面,，大致上Javascript扮演的角色就是那種,，你打開(kāi)一個(gè)網(wǎng)頁(yè)彈出一個(gè)很挫的框的這類(lèi)事情,，我們暫且親切地稱(chēng)之為“JS一代”。經(jīng)過(guò)歲月的沉淀,，寫(xiě)著寫(xiě)著寫(xiě)出很多祖?zhèn)鞔a,，慢慢地就有了些積累，也就進(jìn)入了以JQuery為核心代表的鐵器時(shí)代,，這個(gè)時(shí)候可以搞一些特效啦,，代碼可以寫(xiě)的很少，但事情可以做很多,，我們親切地稱(chēng)它為“JS二代”,。隨后前端進(jìn)入了移動(dòng)互聯(lián)網(wǎng)的時(shí)代，以Bootstrap為首的一些響應(yīng)式框架成為兼容移動(dòng)端的解決方案,。Node.JS的出現(xiàn),，使得Javascript在后端開(kāi)發(fā)有一席之地，這得益于Google的V8引擎,，使其有良好的體驗(yàn),。在此之前我一直認(rèn)為Javascript是一門(mén)解釋型語(yǔ)言，通過(guò)一些列學(xué)習(xí),，倒是有了不同的看法,，也不能說(shuō)前面的不對(duì)吧，但是其內(nèi)部還是有編譯的環(huán)節(jié)在的,。我們可以親切地稱(chēng)其為“JS三代”。而今,，React,、Vue、Angular在前端構(gòu)成”三駕馬車(chē)“的局面,，姑且認(rèn)為是”JS四代“吧,。 從樓上的種種示例表明Javascript足夠擔(dān)當(dāng)?shù)闷稹蹦_本之王“的稱(chēng)號(hào)，那么,，我們?yōu)槭裁慈W(xué)Typescript呢,？JavaScript語(yǔ)言不同于Java、C#這類(lèi)強(qiáng)語(yǔ)言會(huì)在編譯時(shí)進(jìn)行靜態(tài)類(lèi)型檢查,。它是一種弱語(yǔ)言,，在運(yùn)行的時(shí)候進(jìn)行動(dòng)態(tài)類(lèi)型檢查，然后運(yùn)氣好的話,，可能打開(kāi)瀏覽器的控制臺(tái),，會(huì)冒出你都想不到的”雞血紅“。原因之一是Javascript語(yǔ)言沒(méi)有其他語(yǔ)言那么多的條條框框,，你可以隨意地進(jìn)行類(lèi)型轉(zhuǎn)換,。那么有了Typescript以后,，我們自然而然地能夠避免很多不必要的錯(cuò)誤，一些錯(cuò)誤把它提到編譯時(shí)發(fā)現(xiàn),，更加嚴(yán)謹(jǐn)了許多?，F(xiàn)階段，我學(xué)習(xí)Typescript的主觀感受就是類(lèi)型檢查很棒,，寫(xiě)起來(lái)越來(lái)越像Java,，什么注解、類(lèi)型,、類(lèi),、模塊、接口啥的都出來(lái)了,，但這是遠(yuǎn)遠(yuǎn)不夠的,，還需要后期深入學(xué)習(xí)才能體會(huì)到它的一些其它玄學(xué)。 二,、環(huán)境搭建2.1 ,、安裝 請(qǐng)確保你電腦上裝有Node.JS運(yùn)行環(huán)境，如果條件不允許的話,，切到淘寶源地址,，然后執(zhí)行樓下這句話 npm i typescript -g 通過(guò)tsc --help我們來(lái)查看相關(guān)命令，看到這里說(shuō)明你已經(jīng)安裝成功了,。 C:\Users\ataola>tsc --help
Version 3.5.3
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' or 'ESNEXT'.
-m KIND, --module KIND Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 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.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint'
--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'.
@<file> Insert command line options and files from a file.
C:\Users\ataola>
2.2,、配置 執(zhí)行npm --init tsc --init
message TS6071: Successfully created a tsconfig.json file. 如何使用配置文件,執(zhí)行樓下命令。 tsc -p ./tsconfig.json 配置項(xiàng)初學(xué)者,，知道樓下這幾個(gè)就好,。 target: 指的就是將ts代碼要轉(zhuǎn)換成哪個(gè)版本的js代碼 es5 es3 module: 指的就是將ts代碼轉(zhuǎn)換成js代碼之后，使用的模塊化的標(biāo)準(zhǔn)是什么 outDir: 指的就是將ts代碼轉(zhuǎn)換成js代碼之后,，js代碼存放的文件夾路徑 rootDir: 指的就是要將哪個(gè)目錄中的ts代碼進(jìn)行轉(zhuǎn)換,，ts代碼的存放路徑 strict: 是否要將ts代碼轉(zhuǎn)換為嚴(yán)格模式的js代碼！ 當(dāng)然這里你不配置文件,，在代碼量很少的情況下也是對(duì)的,，合情合理的。
三,、關(guān)于數(shù)據(jù)類(lèi)型入門(mén)例子布爾值: boolean var flag:boolean = false;
console.log(!flag); //true 數(shù)字: number // 二進(jìn)制
let binaryLiteral: number = 0b001001100101;
//八進(jìn)制
let octalLiteral: number = 0o1145;
//十進(jìn)制
let decLiteral: number = 613;
//十六進(jìn)制
let hexLiterral: number = 0x265;
console.log("二進(jìn)制數(shù)：", binaryLiteral);
console.log("八進(jìn)制數(shù)：", octalLiteral);
console.log("十進(jìn)制數(shù)：", decLiteral);
console.log("十六進(jìn)制數(shù)：", hexLiterral); 這里你在ts文件下寫(xiě)是這樣子的,，但是當(dāng)你執(zhí)行tsc編譯成js文件的時(shí)候，只有十六進(jìn)制是不變的,，其他的都會(huì)被轉(zhuǎn)成十進(jìn)制,，最終的答案顯示的也是十進(jìn)制。 字符串: string let user1_name: string = "ataola";
let user2_name: string = '阿濤啦';
let user3_name: string = `Eason Zheng`;
let user3_age : number = 23;
let bio = `Hello Everyone, My name is ${user3_name}, and I 'll be ${user3_age + 1} in next years!`;
console.log("user1_name: ", user1_name);
console.log("user2_name: ", user2_name);
console.log("user3_name: ", user3_name);
console.log("bio: ", bio); 這里,，單雙引號(hào)編譯成js文件后,，還是保持原來(lái)的樣子,，但是模板字符串它會(huì)被編譯成雙引號(hào)，而不是仍保持模板字符串,。 數(shù)組: array let num_arr1: number[] = [1, 9, 9, 7, 0, 6, 1, 3];
let num_arr2: Array<number> = [1, 9, 9, 7, 0, 6, 1, 3];
let str_arr: string[] = ['hong', 'kong', 'is', 'come', 'back', '!'];
console.log("num_arr1: ", num_arr1);
console.log("num_arr2: ", num_arr2);
console.log("str_arr: ", str_arr); 可以看到,，有兩種創(chuàng)建方式 number[] 和 Array<number> 元組：Tuple let tuple1_right: [string, number];
tuple1_right = ['ataola', 23];
console.log("tuple1_right: ", tuple1_right); 元組就是可以產(chǎn)生不同類(lèi)型元素的數(shù)組，但是如樓上所示,，把'ataola'和23對(duì)調(diào)一下就會(huì)編譯出錯(cuò),，因?yàn)樵诘谝痪渚鸵呀?jīng)定死了，然后這邊我們?nèi)绻L問(wèn)一個(gè)超出長(zhǎng)度的值,，例如 tuple1_right[3] = 'xxx',，也會(huì)報(bào)錯(cuò)。然后你放不同類(lèi)型的例如boolean類(lèi)型的也是不行的哦,。這里也可以用聯(lián)合類(lèi)型,，“l(fā)et param = string | number"。 枚舉：enum enum Color{RED, GREEN, BLUE = 613};
let c: Color = Color.BLUE;
let cName: string = Color[613];
console.log("c: ", c);
console.log("cName: ", cName);const enum Directions {
Up,
Down,
Left,
Right
};
let directions: number[] = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
console.log("directions: ", directions); 對(duì)JavaScript標(biāo)準(zhǔn)數(shù)據(jù)類(lèi)型的一個(gè)補(bǔ)充,，你可以定義一些有名字的數(shù)據(jù)常量,。枚舉值除了第一個(gè)外，都有依次加1的規(guī)律,，除非你自己設(shè)置過(guò),，默認(rèn)第一個(gè)為0,外部枚舉用來(lái)描述已經(jīng)存在的枚舉類(lèi)型的形狀。枚舉類(lèi)型默認(rèn)是從0開(kāi)始的,， 然后你也可以自己給它賦值,，如果想取名字的話，那就是對(duì)應(yīng)的值的數(shù)組形式,。 任意值：any let unknow: any = 613;
console.log("number unknow: ", unknow);
unknow = 'Hello, World!';
console.log("string unknow: ", unknow);
unknow = true;
console.log("boolean unknow: ", unknow);
let unknowArr = ['ataola', 'male', 1997, true];
console.log("unknowArr: ", unknowArr); 不清楚變量類(lèi)型,，想跳過(guò)編譯期間的檢查 空值：void function loginInfo(): void {
console.log("A client logined!");
}
loginInfo();
let param1: void = undefined;
let param2: void = null;
console.log("param1: ", param1);
console.log("param2: ", param2);
一般都是函數(shù)見(jiàn)到返回空值較多，聲明一個(gè)void的變量的話,，你只能給它賦值null或者undefined， 你這邊放著不寫(xiě),，默認(rèn)也是前面的情況,。 PS: 運(yùn)行的話 tsc -p ./tsconfig.json,沒(méi)有指定的話，會(huì)在同目錄下生成一個(gè)js文件,。也可以直接進(jìn)入所在目錄 執(zhí)行 tsc xxx.ts 或者 tsc xxx或者直接tsc也是可以的,，默認(rèn)編譯成嚴(yán)格模式的js。 四,、問(wèn)題思考4.1,、Typescript報(bào)錯(cuò)，編譯能進(jìn)行嗎,？編譯后的js文件能運(yùn)行嗎,？ 編譯能夠進(jìn)行下去,，編譯后的js文件也可以運(yùn)行。 這里我們舉一個(gè)低配版實(shí)現(xiàn)查找數(shù)組索引的例子,。 index.ts //一個(gè)基于Typescript,，數(shù)字?jǐn)?shù)組索引查找的實(shí)現(xiàn)
interface indexOfFunc {
(arr: number[], num: number): number;
}
let ataolaFI: indexOfFunc;
ataolaFI = function (arr: number[], num: number) {
for(let i = 0; i < arr.length; i++){
if(arr[i] === num){
return i;
}
}
}
console.log("[1, 2, 4, 3, 5]中4的索引是: ", ataolaFI([1, 2, 4, 3, 5], 4)); 這里我們通過(guò)執(zhí)行”tsc index.ts"，發(fā)現(xiàn)會(huì)報(bào)一個(gè)樓下的錯(cuò),，但是執(zhí)行還是可以的,。 1.ts:7:1 - error TS2322: Type '(arr: number[], num: number) => number | undefined' is not assignable to type 'indexOfFunc'.
Type 'number | undefined' is not assignable to type 'number'.
Type 'undefined' is not assignable to type 'number'.
7 ataolaFI = function (arr: number[], num: number) {
~~~~~~~~
Found 1 error.
這里的話少考慮一種情況就是，要是找不到呢,？后面改正的代碼是 //一個(gè)基于Typescript,，數(shù)字?jǐn)?shù)組索引查找的實(shí)現(xiàn)
interface indexOfFunc {
(arr: number[], num: number): number;
}
let ataolaFI: indexOfFunc;
ataolaFI = function (arr: number[], num: number) {
for(let i = 0; i < arr.length; i++){
if(arr[i] === num){
return i;
}
}
return -1;
}
console.log("[1, 2, 4, 3, 5]的4的索引是: ", ataolaFI([1, 2, 4, 3, 5], 4)); 這很大程度上，能讓開(kāi)發(fā)巧妙地避開(kāi)邏輯漏洞,。 至此,，本文已接近尾聲，以上內(nèi)容是ataola童鞋學(xué)習(xí)時(shí)候的總結(jié),，水平有限,，可能不一定都對(duì)的，若有錯(cuò)誤,，供批評(píng)指正,。最后，感謝您的收聽(tīng),！ typescript官網(wǎng)： http://www./ 官方在線運(yùn)行： http://www./play/?ssl=2&ssc=22&pln=1&pc=1#
|
