分享Typescript的13個基礎語法
一.Ts是什么
首先，強類型不允許隨意的隱式類型轉換，而弱類型是允許的。JavaScript就是經典的弱類型語言。而Typescript可以說是JavaScript的超集，在JS的基礎上新增了許多語法特性，使得類型不再可以隨意轉換，能大大減少開發(fā)階段的錯誤。
二. 基本語法
1.聲明原始數(shù)據類型
在變量后面指定一個關鍵字表示其只能為什么類型。
string類型：
const a: string = 'auroras'
number類型：
const b: number = 666 // 包括 NAN Infinity
boolean類型：
const c: boolean = true
null類型：
const d: null = null
undefined類型：
const e: undefined = undefined
symbol類型：
const h: symbol = Symbol()
2.聲明Object類型
首先，object類型不單單可以指定對象，還可以指定數(shù)組或函數(shù)：
const foo1: object = {};
const foo2: object = [];
const foo3: object = function(){};
如果只想指定為對象，如下，對象屬性都要提前聲明好類型：
const obj: {name: string,age: number} = {
name: '北極光',
age:18
}
2.1聲明數(shù)組類型
可以指定聲明Array且通過<>指定元素類型，比如指定聲明元素都為數(shù)字的數(shù)組：
const arr: Array<number> = [1,2,3]
第二種方式如下，也指定聲明元素都為數(shù)字的數(shù)組：
const arr: number[] = [1,2,3]
2.2聲明元組類型
就是要提前指定數(shù)組里每個元素的類型，嚴格一一對應：
const tuple: [number,string,boolean] = [666,'auraros',true]
3.聲明枚舉類型
通過關鍵字enum聲明一個枚舉類型，如：
enum Status {
pedding = 1,
resolve = 2,
reject = '3'
}
//訪問
console.log(Status.pedding);
如果全不寫值，默認值為從0開始遞增。如果第一個元素為字符類型，就必須全部定義值。如果第一個元素指定為一個數(shù)字，后面元素不寫值，那值為第一個元素值按位置大小遞增的結果。
4.函數(shù)參數(shù)與返回類型
函數(shù)聲明式：
指定函數(shù)傳入參數(shù)類型，指定返回值類型，調用時傳入參數(shù)個數(shù)與類型都必須相同：
括號里指定每個參數(shù)類型，括號右邊指定返回值的類型。
function fun (name:string,age:number):string{
return 'sss'
}
fun('auroras',18);
如果傳入參數(shù)不確定傳不傳，那么可以給參數(shù)加個‘？'表明它是可選的：
function fun (name:string,age?:number):string{
return 'sss'
}
fun('auroras');
或者給參數(shù)添加默認值，那也會成為可選參數(shù)：
function fun (name:string,age:number=666):string{
return 'sss'
}
fun('auroras');
如果參數(shù)個數(shù)不確定，可以用擴展運算符加解構賦值表示，當然要傳入與指定類型一致的：
function fun (name:string,age:number=666,...res:number[]):string{
return 'sss'
}
fun('auroras',1,2,3);
函數(shù)表達式：
const fun2:(name:string,age:number)=>string = function(name:string,age:number){
return 'sss'
}
定義接口時再詳細說。
5.任意類型
通過指定any關鍵字表示任意類型，跟原來 js 一樣，可以任意賦不同類型的值：
let num:any = 1; num = 'a'; num = true;
6.類型斷言
類型斷言就是明確的告訴typescript這個變量就是某種類型的，百分之百確定。不用typescript在一些情況下要自己推斷某些沒有明確定義或者多變的場景是什么類型。
可以通過 as+類型 斷言它就是某種類型的：
const res = 1; const num = res as number;
也可以通過 <類型> 形式斷言（不推薦）：
const res = 1; const num = <number>res
7.接口基本使用
接口可以理解為一種規(guī)范，一種契約?？梢约s束一個對象里應該有哪些成員，這些成員都是怎么樣的。
通過interface定義一個Post接口，這個接口是一個對象，規(guī)則為有一個name屬性類型為string，age屬性類型為number。
interface Post {
name:string;
age:number
}
然后比如有一個函數(shù) printPost ，它的參數(shù) post 使用我們定義的 Post 接口的規(guī)則，那么調用此函數(shù)傳參時要傳入符合 Post 接口規(guī)則的數(shù)據。
interface Post {
name:string;
age:number
}
function printPost(post: Post){
console.log(post.name);
console.log(post.age);
}
printPost({name:'asd',age:666})
當然，函數(shù)傳參時可能有些參數(shù)是可選的，那么我們可以給接口也定義可選的成員，通過屬性后加一個‘？'指定可選成員：
interface Post {
name:string;
age:number;
sex?:string;
}
const auroras: Post = {
name:'asd',
age: 18
}
如果用readonly修飾成員，那么這個成員屬性在初始化后便不可修改：
interface Post {
name:string;
age:number;
sex?:string;
readonly like:string
}
const auroras: Post = {
name:'asd',
age: 18,
like: 'natrue'
}
auroras.name = 'aaaa';
//保錯
auroras.like = 'wind';
如果連成員屬性名稱都不確定，那么可以聲明動態(tài)成員，要指定成員名字類型與成員值的類型，如：
interface Post {
[prop:string]:string
}
const auroras: Post = {
name:'asd',
like: 'natrue'
}
8.類基本使用
描述一類具體事物的抽象特征。ts增強了es6中class類的相關語法。
首先，類的屬性使用前必須提前聲明好：
class Person {
name: string;
age: number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
sayHi(msg:string):void {
console.log(`hi,${msg},i am ${this.name}`);
}
}
9.類的訪問修飾符
private 修飾私有屬性，只能在類內部訪問。public 修飾公用屬性（默認），
外部也可訪問：
class Person {
public name: string;
private age: number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
sayHi(msg:string):void {
console.log(`hi,${msg},i am ${this.name}`);
console.log(this.age);
}
}
const jack = new Person('jack',20);
//Person類公有屬性可以訪問
console.log(jack.name);
//Person類私有屬性不可以訪問
console.log(jack.age);
protected修飾為受保護的，外部也不可訪問。但與 private 的區(qū)別是若是繼承的子類是可以訪問的。
class Person {
public name: string;
private age: number;
// protected
protected gender: boolean;
constructor(name:string,age:number){
this.name = name;
this.age = age;
this.gender = true;
}
sayHi(msg:string):void {
console.log(`hi,${msg},i am ${this.name}`);
console.log(this.age);
}
}
class children extends Person{
constructor(name:string,age:number){
super(name,age,);
//可以訪問
console.log(this.gender);
}
}
10.類只讀屬性
給屬性設置 readonly 則為只讀屬性，該屬性初始化后便不可再修改。
class Person {
public name: string;
private age: number;
// readonly
protected readonly gender: boolean;
constructor(name:string,age:number){
this.name = name;
this.age = age;
this.gender = true;
}
sayHi(msg:string):void {
console.log(`hi,${msg},i am ${this.name}`);
console.log(this.age);
}
}
11.類與接口
一些類與類之間有些許共同的特征，這些共同的特征可以抽象成為接口。
比如 Person 類和 Animal 類，雖然是不同類，但是人和動物都會吃東西和走路等，這些共同的特征可以由接口定義。最后一個特征就定義一個接口。
//吃接口
interface Eat {
eat(food:string):void
}
//行進接口
interface Run {
run(behavior:string):void
}
//人
class People implements Eat,Run {
eat(food:string){
console.log(`在餐桌上吃${food}`);
}
run(behavior:string){
console.log(`站著${behavior}`);
}
}
//動物
class Animal implements Eat,Run {
eat(food:string){
console.log(`在地上上吃${food}`);
}
run(behavior:string){
console.log(`爬著${behavior}`);
}
}
12.抽象類
約束子類必須有某些成員，有點類似接口，不同的是抽象類可以包含一些具體的實現(xiàn)。比如動物類應該為一個抽象類，它的子類有貓，狗，熊貓等。它們都是動物，也有一些共同的特征。定義一個類為抽象類后，就不能再new實例了，只能被其子類繼承。
其中abstract 定義抽象類，類里用abstract定義一個抽象方法，子類必須實現(xiàn)抽象方法。
abstract class Animal {
eat(food:string){
console.log(`在地上吃${food}`);
}
abstract run (behavior:string):void
}
//貓
class Dog extends Animal{
run(behavior:string):void{
console.log(behavior);
}
}
const d1 = new Dog();
d1.eat('骨頭')
d1.run('四腳爬行')
//兔子
class rabbit extends Animal{
run(behavior:string):void{
console.log(behavior);
}
}
const r1 = new rabbit();
d1.eat('蘿卜')
d1.run('蹦蹦跳跳')
13.泛型
泛型就是在定義函數(shù)，接口或者類的時候沒有指定具體類型，等到使用時才指定具體類型。極大程度的復用代碼。
比如有一個 identity 函數(shù)，這個函數(shù)會返回任何傳入它的值，且傳入的類型與返回的類型應該是相同的。如果傳入數(shù)字，不用泛型的話，
這個函數(shù)可能是下面這樣：
function identity(arg:number):number{
return arg
}
如果傳入字符串，這個函數(shù)可能是下面這樣：
function identity(arg:string):string{
return arg
}
這樣的話太麻煩，所以可以使用泛型，一般用大寫 T 表示泛型，它可以適用于多個類型，且傳入類型與返回類型是相同的。
function identity<T>(arg:T):T{
return arg
}
到此這篇關于分享Typescript的14個基礎語法的文章就介紹到這了,更多相關Typescript的14個基礎語法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于JavaScript常見數(shù)組方法之如何轉置矩陣的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了javascript中的糖衣語法Promise對象詳解,Promise 對象代表了未來將要發(fā)生的事件，用來傳遞異步操作的消息，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
單擊事件，將Td內容更新為一個Div，其中裝載了一個Text，用于用戶輸入新的Td的值，一個確定按鈕，一個取消按鈕，用于保存或取消用戶的輸入內容2013-01-01
這篇文章主要介紹了js實現(xiàn)俄羅斯方塊小游戲分享,,需要的朋友可以參考下2014-01-01
TypeScript 5.2版本中新添加了using關鍵字,目前該關鍵字的提案也進入了ECMAScript的Stage 3,也就是說很快就會進入JavaScript語言本身中,using和const, let和var一樣都是用于變量聲明的,那么它到底有什么與眾不同的地方呢,本文給大家介紹的非常詳細2023-11-11
大家都知道，面向對象的三大特征——封裝、繼承、多態(tài)。下面通過本文給大家介紹JS繼承與閉包及JS實現(xiàn)繼承的三種方式，感興趣的朋友一起看看吧2017-10-10
javascript實現(xiàn)動態(tài)增加刪除表格行(兼容IE/FF)
javascript實現(xiàn)動態(tài)增加刪除表格行(兼容IE/FF)...2007-04-04
vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務器的功能
這篇文章主要介紹了vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務器的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了JS寫常用導航鼠標下經過下方橫線自動跟隨效果，文中還給大家講解了基于css?+?js?實現(xiàn)導航欄下劃線跟隨鼠標滑動效果,需要的朋友可以參考下2023-01-01
JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)
這篇文章主要介紹了JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08