寫給JS老鳥的TS速成教程
搭建基礎開發環境
要準備的環境
node.js 14.14以上 ，vs code最新，vs code TS開發插件
開始開發
方式一：TS原生編譯開發
補充知識：i是install的簡寫，-g是global的簡寫，除此外還有-D = --save-dev 、-S= --save，現在新版npm cli好像會默認執行—save
npm i -g typescript && tsc -init
vs code創建 檔案夾/index.ts，
手動編譯 tsc+檔案名，改一次編譯一次
自動編譯 Ctrl+shift+B —> 監視模式，檔案變動時自動編譯 或 如下：
① tsc 檔案名 -w，缺點是只能監視一個檔案，除非開多個命令列，
② 創建tsconfig.json，只寫一對{}，使其符合json規范，然后直接執行 tsc，即可監視所有ts檔案的改動，
運行結果：創建index.html， script.import 編譯好的index.js，用瀏覽器打開index.html
開箱即用見 附件【TS_ori】
編譯控制
tsconfig.json是ts編譯器的組態檔，可以對編譯進行自定義
不知道可選值可以先給一個錯誤的值，編譯器會列出所有可選的正確配置值
tsconfig.json可以寫注釋，因為其是ts編譯器的組態檔，
{
// 初步
"include":[ //指定哪些目錄的ts檔案需要被編譯，包含目錄
"./src/**/*" //.當前目錄 src檔案夾 **任意目錄 *任意檔案
],
"exclude":[],//指定哪些ts檔案不被編譯，排除目錄，有默認值，比如node_modules
"extends":"./config/base",//繼承某個組態檔，配置復用
"files":[],//指定ts檔案編譯，包含檔案，與include類似
//進階
"compilerOptions":{
"target":"ES6", //指定ts編譯成何種js版本，即目標代碼的版本
//ES2015(ES6)，ES2016...ESNext(最新版ES)
"module":"ES6",//指定模塊化解決方案
"lib":["dom"],//用來指定專案中使用到的庫，一般不寫此屬性（有默認值），除非代碼在nodejs中運行，缺少某些庫，如dom，dom庫為document
"outDir":"./dist",//指定編譯后檔案所在目錄，dist即distribution，發行版
"outFile":"./dis/app.js",//將代碼合并為一個檔案，若需要把各模塊合并為一個檔案，只能支持amd and system模塊方案
"allowJs":false, //是否對js進行編譯，默認否 - false //合并檔案一般不用outFile，而是結合打包工具來實作
"checkJs":false, //是否檢查js代碼是否符合語法規范
"removeCommentss":true,//是否移除注釋
"noEmit":false,//執行編譯但是不生成編譯后的檔案，場景是只用到ts編碼和型別檢查， 不須編譯
"noEmitOnError":false,//發送錯誤時不生成編后的譯檔案，默認為false，為的是讓js程式員緩慢過渡到ts，建議改為true
"strict":false,//以下三個檢查的總開關，建議開發時設為true
"alwaysStrict":false,//指定編譯后的js檔案是否使用嚴格模式，嚴格模式：語法嚴格，在browser性能好一些
"noImplicitAny":false,//Implicit隱式的，開啟隱式any的檢查，不允許使用
"noImplicitThis":false,//不允許不明確型別的this
"strictNullChecks":false,//嚴格檢查空值，若一個變數可能為null，則報錯，除非先進行非空判斷或box?.addEventListener()
}
}
方式二：自動化開發
補充知識：webpack-cli是通過命令列來使用webpack、ts-loader是webpack加載器，是ts和webpack的橋梁
補充知識：webpack這東西就是會沿著你給定的一個入口檔案去遍歷所有關聯的檔案，然后按照一定規則重新整理、壓縮成新的一批檔案，我們的檔案格式是無窮無盡的，webpack不可能認識和處理全部格式，所以我們通過加入各種loader，稱加載器，來幫助webpack認識它們，
創建空檔案夾，執行npm init -y（完成專案初始化）
npm i -D webpack webpack-cli typescript ts-loader
撰寫webpack配置，要注意的是，webpack打包必須配合tsconfig.json使用，也就是你的ts代碼處要有這個tsconfig.json檔案，因為ts程式的具體編譯的作業還是由ts本身提供，而ts編譯本身要用到tsconfig.json，現在看來，ts-loader真的僅僅是個橋梁，
在package.json中加入打包命令build:webpack，執行npm run build，
撰寫配置
使用chrome來查看ts程式的運行結果
補充知識：webpack可以支持自動生成html檔案并引入打包好的資源，以演示代碼效果，這比自己手動寫個html方便多了，生成這個html檔案有兩種方式，配置式，如傳個title引數，其他由webpack自己決定，或者自己擬定一個html模板交給插件，
cnpm i -D html-webpack-plugin
自動化構建--所寫即所見
cnpm i -D webpack-dev-server ，package.json 加入 "start":"webpack serve --open" ，npm run start
清楚舊的打包檔案
打包默認模式是用新檔案覆寫舊檔案，可能存在殘留問題，解決方法：clean-webpack-plugin
指定可引入的檔案
指定哪些檔案可以被其他檔案作為模塊來引入，這里的引入是代碼檔案之間的引入，這樣我們就可以愉快地使用ESM（ES Module）了
解決目標代碼的兼容性問題
補充知識：前端常見兼容性問題有兩種，一種是瀏覽器內核類，一種是規范版本類，前者主要表現為在Chrome能運行的代碼，在Firefox卻出現問題，在iPhone默認瀏覽器能運行的代碼在華為默認瀏覽器卻有問題；后者主要表現為ES6的代碼在瀏覽器中報錯，因為ES6對比ES5變化是較大的，現在ES規范每年一個版本，瀏覽器跟進也比以前快了，這個問題正變得越來越不是問題，
TS的tsc僅僅能夠實作把ts原始碼編譯成不同ES規范版本的js代碼而已，
babel/core是babel的核心庫、present-env是預置環境，預置不同瀏覽器環境，幫助代碼兼容不同瀏覽器，babel-loader是結合webpack和babel的橋梁、core-js（Modular standard library ）可以使老版本的瀏覽器使用到新版本的js的一些技術，如promises等，由于這個庫比較龐大，內含很多小庫，且是模塊化的，我們應按需使用，按需使用我們直接通過webpack來實作
webpack rules的use執行順序是從下往上執行，我們先用ts-loader把ts轉換為js，然后用babel-loader把新版本的js轉換為老版本/兼容性高的js
- cnpm i -D @babel/core @babel/preset-env babel-loader core-js
關于兼容性打包后仍報錯
補充知識：設定了targets.ie==11后，打包的代碼拿到ie11運行依然報錯，原因在于webpack打包后的代碼用了一個箭頭函式實作的自執行函式包裹，作用是創造一個代碼作用域，防止全域變數污染等，它實際是webpack自動生成的，與babel無關，babel只能源檔案內的箭頭函式起作用，實際上，這可能是webpack故意為之，其本身就是不想兼容某些低版本瀏覽器，解決方法，out加上environment：{arrowFunction:false}，取消箭頭函式，
TS語言
報錯資訊，assign：賦值、指派、指定，resolve：決議、決定、解決
默認ts代碼有錯誤，仍然可以編譯生成js，在tsconfig中可更改
ts可編譯成任意版本js
若賦初值，ts會根據值型別推算變數型別，這會使變數宣告加上型別變得多此一舉，沒錯，實際上，型別檢測更多是用給函式傳參（形參）和回傳值的，
型別
補充知識：可用字面量代替型別名，如10，以后只能賦值10，有點常量的意思，除此之外，還有聯合型別、任意型別等
talk is cheap，show me the code
export const zex: number = 1;
{
let a: number = 10;
let b: number = 20;
console.log(a, b)
//計算變數型別
let c = true;
//計算函式回傳值型別
function sum(a: number, b: number): string {
return a + b + "";
}
let result = sum(a, b);
}
const zex:number=1;
{
// 字面量賦值
let a:10;
let a1:number;
let b:10=10;
a=10;
a1=10;
// 用 或符號 構成 聯合型別
let c:"male"|"female";
c="male";
c="female";
let d:string|number;
d=10;
d="hello";
// 任意型別 - 關閉型別檢測
let e:any;
e=10;
e="female";
e=true;
// 隱式any
let f;
f=10;
f="female";
f=true;
// 賦值
// 以下不報錯，這導致a的型別檢測失效
a1=e;
// unknown同any差不多，但是可解決以上問題，是一個型別安全的any
let g:unknown;
// a=g;報錯，應改為
if(typeof g == "number"){
a1=g;
}
//斷言：判斷的語言，根據實際情況，把某個變數人為（自己）地斷定為某種型別，跳過編譯
a1 = g as number;
a1 = <number>g;
//函式的回傳值
//回傳值為number|string型
function sum(a:number,b:number){
if(a>b){
return a+b;
}else{
return a+b+"";
}
}
function sum2(a:number,b:number):number|string{
if(a>b){
return a+b;
}else{
return a+b+"";
}
}
// 慷訓傳
function sum3(a:number,b:number):void{
return;
}
function sum4(a:number,b:number):void{}
function sum5(a:number,b:number):void{
return undefined;
}
// never：永遠不會回傳結果
// 沒有回傳值也是一種回傳值，而never是空空
// 在程式報錯時，代碼立即停止執行，程式結束，函式結束，所以永遠不會有值回傳，事情不會發生
function err():never{
throw new Error("err");
}
}
{
// object其實是無用的，因為ts一且皆物件，并沒有起到型別限制的作用
let a:object;
a={};
a=function(){};
//以下有效
let b:{name:string};
b={name:"John"};
// b={name:"John",age:12}結構不一致報錯
// ？-可選屬性
let c:{name:string,age?:number};
c={name:"John",age:12};
c={name:"John"}
// 任意屬性：自由添加屬性，新屬性未知
// 新屬性名為字串，屬性值為任意型別，propName命名隨意
let d:{name:string,[propName:string]:any}
d={name:"John",str:123}
let d1:{name:string,[propName:string|number]:any}
d1={name:"John",str:123}
d1={name:"John",123:123}
// 限制函式，單Function無意義
let e:(a:number,b:number)=>number
// 陣列
let f:string[];
f=["John"]
let f1:Array<number>;
f1=[123];
// 元組：固定長度的陣列
let g:[String,String];
// 必須符合給定，不多不少
g=["Hello","Hello"];
//考慮資料存盤與表示分離，資料庫存盤應簡短、非字串，此時Object并不滿足要求
// 列舉，默認從0開始
enum Gender{
male=0,
female=1
};
let h:{name:string,gender:Gender};
h={name:"Jhon",gender:Gender.female};
console.log(h.gender,h.gender==Gender.female)
// & - 與，型別組合
let i:number&string //無意義
let i1:{name:string}&{age:number};
i1={name:"John",age:18};
// 型別的復用-別名
let j1:number;
let j2:1|2|3|4|5;
let j3:1|2|3|4|5|6;
type myType=number;
type myType2=1|2|3|4|5;
let k1:myType;
let k2:myType2;
let k3:myType2|6;
k3=3
k3=6
// k3=7 報錯
}
// 類
class Person {
// 實體屬性，通過實體訪問
readonly name: string = "默認名字";
age: number = 18;
// 類屬性，通過類訪問
static avgAge: number = 18;
//只讀屬性
static readonly baseName: string = "張"
// 類方法
sayHello(name: string): string {
return "Hello";
}
static sayHi(name: string): string {
return "Hi";
}
};
const per = new Person();
Person.avgAge = 19;
per.age = 20;
// Person.name="三三"; // 報錯
// Person.baseName="李"; // 報錯
console.log(Person.avgAge, per.age);
// 構造器與this
class Dog {
name: string;
age: number;
constructor(name: string, age: number) {
// this表示當前實體
this.name = name;
this.age = age;
}
bark() {
// 當前呼叫方法的物件，如dog1.bark()，this為dog1
console.log(this, "旺旺旺");
}
}
const dog: Dog = new Dog("旺財", 3);
// 繼承
{
class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
bark() {
}
}
class Dog extends Animal {
bark() {
console.log(this.name + this.age + "旺旺旺");
}
run() {
console.log("蹦蹦跳跳");
}
}
class Cat extends Animal {
sex: string;
constructor(name: string, age: number, sex: string) {
// 呼叫父類構造器
super(name, age);
this.sex = sex;
}
bark() {
// 參考父類的方法
super.bark();
}
}
const cat = new Cat("小喵", 3, "母");
//抽象類
//對于某些類，由于本身拿來實體化是不合適的，且我們也不希望被這樣做
//因此我們就把他設為抽象類，只可以繼承，不可以實體化
abstract class Food {
name: string;
color: string;
// 抽象類須有構造器
constructor(name: string, color: string) {
this.name = name;
this.color = color;
}
abstract eat(name: string): void;
abstract cook(name: string): number | string;
}
/**
* 在限制物件的型別上，以下兩種方式功能一致
* 介面，定義了類的結構（屬性、方法）
* 此介面非彼介面，它與Java的介面有點不同
*/
type myType = {
name: string,
age: number
};
interface myInterface {
name: string;
age: number;
}
// 介面可以重復定義，實際效果是同名介面的總和
interface myInterface {
sex: string;
}
const man: myInterface = {
name: "張三",
age: 18,
sex: "男"
}
// 限制類的結構
interface myInterface2 {
name: string;
sayHi(): void;
}
interface myInterface3 { }
class People implements myInterface2, myInterface3 {
name: string;
constructor(name: string) {
this.name = name;
}
sayHi(): void {
console.log(this.name);
}
}
/**
* 抽象類和介面
* 抽象類：
* 1、可以普通方法，也可以抽象方法
* 2、通過繼承來使用，TS 類的設計為單繼承
*
* 介面：
* 1、只有抽象方法
* 2、通過實作來使用，支持多繼承
*/
}
// 屬性的封裝 - 保護類的屬性
// 屬性可被隨意修改將導致物件中的資料變得不安全
// 通過類修飾符解決這個問題
// 默認為public，屬性可被隨意修改
{
class Person {
name: string;
public sex: string;
public age: number;
constructor(name: string, sex: string, age: number) {
this.name = name;
this.sex = sex;
this.age = age;
}
}
// 最強安全性
// private修飾的屬性，只有兩種修改方式：
// 1、構造器傳入
// 2、呼叫實體方法修改，這種方法在java中被稱為setter
// 此外，這種方式也給屬性的訪問帶來麻煩，我們同樣只能通過方法return該屬性來訪問，在java中稱為getter
// 這種setter和getter模式在C#中被吸收為語法:
/**
* get{
return _name;
}
set{
_name = value;
}
*/
class Person2 {
private name: string;
private sex: string;
private age: number;
protected height: number;
constructor(name: string, sex: string, age: number, height: number) {
this.name = name;
this.sex = sex;
this.age = age;
this.height = height;
}
setName(name: string): void {
this.name = name;
}
getName(): string {
return this.name;
}
}
// 此外，private屬性也不可以被子類訪問，protected可以
class Person3 extends Person2 {
showName(): void {
// 無法訪問name，可以訪問height
// console.log(this.name);
console.log(this.height);
}
}
// 泛型
// 當一種型別是什么要在實際中才能確定是，我們使用泛型
// 泛型就是型別的抽象表示（代表）
// 當以下函式的引數與回傳值型別一致，但是無法確定是什么具體型別時，用泛型
function fn(a: number): number {
return a;
}
// 能否使用any？不行，一是關掉了型別檢查，這將埋下隱患，二是無法體現兩者型別一致
function fn2<T>(a: T): T {
return a;
}
function fn3<T, K, I>(a: T, b: K, c: I): T {
return a;
}
function fn4<T, K>(a: T, b: K, c: number): number {
return c;
}
// 在呼叫含泛型函式時，一般會自動推定泛型的型別，我們也可手動指定
fn2(1);
fn4(1, "2", 3);
fn4<number, string>(1, "2", 3);
}
【附件】
https://github.com/heytheww/TSLenrning
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/433365.html
標籤：其他