菜鳥教程: https://www.runoob.com/typescript/ts-basic-syntax.html
TypeScript 是一種給 JavaScript 添加特性的語言擴(kuò)展拌屏。
準(zhǔn)備
安裝npm工具
設(shè)置鏡像
npm config set registry https://registry.npmmirror.com
命令行
npm install -g typescript
npm install -g ts-node
將ts文件編譯成js文件
tsc app.ts
基本類型
- any 聲明為any的變量可以賦予任意類型的值撼玄。類似dynamic 編譯時(shí)不會(huì)進(jìn)行類型檢查
- number 雙精度 64 位浮點(diǎn)值浪腐。它可以用來表示整數(shù)和分?jǐn)?shù)鸽心。
let decLiteral: number = 6; // 十進(jìn)制 - string
反引號(hào)（`）來定義多行文本和內(nèi)嵌表達(dá)式
let name: string = "Runoob";
let words: string = `您好灯谣，今年是 ${ name } 發(fā)布 ${ years + 1} 周年`;
- boolean
- 數(shù)組 let arr: number[] = [1, 2]; 帶泛型let arr: Array<number> = [1, 2];
- 元組 已知數(shù)量和類型的數(shù)組弯院，各元素的類型不必相同陡舅，對(duì)應(yīng)位置的類型需要相同玉掸。
let x: [string, number];
x = ['Runoob', 1]; // 運(yùn)行正常
- 枚舉
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 輸出 2
- void 該方法沒有返回值。
function hello(): void {
alert("Hello Runoob");
}
- null
- undefined
- never 不會(huì)出現(xiàn)的類型
如果一個(gè)類型可能出現(xiàn) null 或 undefined阎抒， 可以用 | 來支持多種類型
let n: number | undefined | null;
n = 1;
n = null;
n = undefined;
let str: string | null | number;
str = '123';
console.log(str == null);
str = 123;
console.log(str == null);
str = null;
console.log(str == null);
let s: number; //undefine
console.log(s);
let ss: number = null; //null
console.log(ss);
/////never
let xx: never;
let yy: number;
// 編譯錯(cuò)誤酪我，數(shù)字類型不能轉(zhuǎn)為 never 類型
xx = 123;
// 運(yùn)行正確，never 類型可以賦值給 never類型
xx = (() => {
throw new Error('exception');
})();
// 運(yùn)行正確且叁，never 類型可以賦值給 數(shù)字類型
yy = (() => {
throw new Error('exception');
})();
// 返回值為 never 的函數(shù)可以是拋出異常的情況
function error(message: string): never {
throw new Error(message);
}
// 返回值為 never 的函數(shù)可以是無法被執(zhí)行到的終止點(diǎn)的情況
function loop(): never {
while (true) {}
}
var st = '1';
//類型強(qiáng)轉(zhuǎn)
var str2: number = <number>(<any>st); //str都哭、str2 是 string 類型
console.log(str2);
class Person {
n = null; //實(shí)例變量
static n = 12; //靜態(tài)變量
}
//循環(huán)
//1. 正常 fori
//2. for in for(j in array){}
//3. for of for(let a of array){}
//4. forEach array.forEach((value,index,array)=>{})
//5. every array.every((value,index,array)=>{})
//方法
function function_name(x: number, y: number): number {
// 語句
return x + y;
}
function_name(1, 2);
//可選的參數(shù)
function optionalFunction(first?: number, last?: number): number {
return first + last;
}
optionalFunction(10, 20);
//默認(rèn)參數(shù)
function buildName(firstName: string, lastName = 'Smith', age = 10) {
return firstName + ' ' + lastName;
}
//剩余參數(shù)
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
//可選的參數(shù)
//可選的參數(shù)
function optionalFunction3(first?: number, last?: number, finalValue?: number): number {
console.log(finalValue); //undefine
return first + last + (finalValue ?? 1);
}
console.log(optionalFunction3(10, 20));
//位置參數(shù) 參數(shù)可選,可以為空
function locationPara({code}:{code?:number}){
}
//方法重構(gòu) 方法名字相同，而參數(shù)不同逞带，返回類型可以相同也可以不同
function disp(str: string): void;
function disp(num: number): void;
function disp(n1: number): void;
function disp(x: number, y: number): void;
//Number 對(duì)象屬性
console.log('最大值為: ' + Number.MAX_VALUE);
console.log('最小值為: ' + Number.MIN_VALUE);
console.log('負(fù)無窮大: ' + Number.NEGATIVE_INFINITY);
console.log('正無窮大:' + Number.POSITIVE_INFINITY);
var ns: number = 100.1234;
ns.toFixed(2);
//toLocaleString() 把數(shù)字轉(zhuǎn)換為字符串欺矫，使用本地?cái)?shù)字格式順序。
//toPrecision() 把數(shù)字格式化為指定的長(zhǎng)度展氓。 100.1234-->toLocaleString(3)->100
// 字符串String
//length 返回字符串的長(zhǎng)度穆趴。
//prototype 允許您向?qū)ο筇砑訉傩院头椒ā?//charAt() 返回在指定位置的字符。
//concat 連接兩個(gè)或更多字符串遇汞，并返回新的字符串未妹。
//... 和js一樣
//數(shù)組
var sites: string[];
sites = ['Google', 'Runoob', 'Taobao'];
//Array
var arr: number[] = new Array(4);
// var arr: number[] = new Array(1,2,3,4);
arr.length;
arr[0] = 4;
//迭代 for..in
//方法 concat() 拼接
//every 檢測(cè)數(shù)值元素的每個(gè)元素是否都符合條件。
function isBigEnough(element, index, array) {
return element >= 10;
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log('Test Value : ' + passed); // false
//filter() 檢測(cè)數(shù)值元素空入，并返回符合條件所有元素的數(shù)組络它。
function isBigEnough(element, index, array) {
return element >= 10;
}
var passed = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log('Test Value : ' + passed); // 12,130,44
//join()
//map()
//pop() 刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。
//push() 向數(shù)組的末尾添加一個(gè)或更多元素歪赢，并返回新的長(zhǎng)度化戳。
//reduce
var total = [0, 1, 2, 3].reduceRight(function (a, b) {
console.log(a, b);
return a + b;
});
console.log('total is : ' + total); // 6
//輸出
3 2
5 1
6 0
//reverse() 反轉(zhuǎn)數(shù)組的元素順序。
//shift() 刪除并返回?cái)?shù)組的第一個(gè)元素埋凯。
//some() 檢測(cè)數(shù)組元素中是否有元素符合指定條件点楼。
//sort() 對(duì)數(shù)組的元素進(jìn)行排序。
//splice() 從數(shù)組中添加或刪除元素白对。
//Map對(duì)象
let myMap:Map<string,number> = new Map();
//以數(shù)組的格式來傳入鍵值對(duì)
let myMap2 = new Map([
["key1", "value1"],
["key2", "value2"]
]);
//set get clear has delete size keys values
for (let value of myMap.values()) {
console.log(value);
}
for (let entry of myMap.entries()) {
console.log(entry[0], entry[1]);
}
//元組 元組中允許存儲(chǔ)不同類型的元素盟步，元組可以作為參數(shù)傳遞給函數(shù)。
var mytuple = [10,"Runoob"];
//操作 push() 向元組添加元素躏结，添加在最后面却盘。 pop() 從元組中移除元素（最后一個(gè)），并返回移除的元素。
//更新 mytuple[0] = 121
//聯(lián)合類型
// 通過管道(|)將變量設(shè)置多種類型
var val:string|number
val = 1;
val = "123"
val = true //報(bào)錯(cuò)
//使用typeof 判斷類型
//接口 接口是一系列抽象方法的聲明黄橘，是一些方法特征的集合兆览，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)塞关，然后第三方就可以通過這組抽象方法調(diào)用抬探，讓具體的類執(zhí)行具體的方法。
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
//接口繼承
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
//多繼承
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
//類
class Car{
// 字段 相當(dāng)于final
readonly engine:string;
// 構(gòu)造函數(shù)
constructor(engine:string,name?:string) {
this.engine = engine
}
// set setEngine(engine :string){
// this.engine = engine //error
// }
// 方法
disp(names? :string):void {
console.log("發(fā)動(dòng)機(jī)為 : "+this.engine)
}
}
var car : Car = new Car("引擎",undefined);
Object.defineProperty(car,'size',{
get() {
return "car name"
},
set(v) {
this.size = v;
},
})
car.disp("haha")
//繼承
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圓的面積: "+this.Area)
}
}
var obj = new Circle(223);
obj.disp()
//instanceof 判斷是否是某個(gè)類型 子類是否是父類的 child instanceof parent
//關(guān)鍵字 public 任何地方都能訪問
// private 只能所在類訪問
// protect 自己和子類訪問
//類和接口
interface ILoan {
interests:number
}
class AgriLoan implements ILoan {
interest:number
rebate:number
constructor(interest:number,rebate:number) {
this.interest = interest
this.rebate = rebate
}
interests: number;
}
var obj = new AgriLoan(10,1)
console.log("利潤(rùn)為 : "+obj.interest+"帆赢，抽成為 : "+obj.rebate )
//命名空間
//TypeScript 中命名空間使用 namespace 來定義
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
//調(diào)用語法格式
SomeNameSpaceName.SomeClassName;
///一個(gè)命名空間在一個(gè)單獨(dú)的 TypeScript 文件中小压，則應(yīng)使用三斜杠 /// 引用它
/// <reference path = "SomeFileName.ts" />
//嵌套命名空間
//namespace命名空間
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
//引用文件
/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
//TypeScript 模塊 模塊是在其自身的作用域里執(zhí)行，并不是在全局作用域椰于，
//這意味著定義在模塊里面的變量怠益、函數(shù)和類等在模塊外部是不可見的，除非明確地使用 export 導(dǎo)出它們
//在運(yùn)行時(shí)瘾婿，模塊加載器的作用是在執(zhí)行此模塊代碼前去查找并執(zhí)行這個(gè)模塊的所有依賴
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代碼部分
}
import someInterfaceRef = require("./SomeInterface");
/// <reference path = "IShape.ts" />
export interface IShape {
draw();
}
import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}
import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}
import shape = require("./IShape");
import circle = require("./Circle");
import triangle = require("./Triangle");
function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
//泛型 用法基本是和java/dart一樣
//使用含有泛型的接口來定義函數(shù)的形狀
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
//interface CreateArrayFunc<T> {
// (length: number, value: T): Array<T>;
//}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
