TypeScript基础知识

最新推荐文章于 2024-04-30 08:45:20 发布
最新推荐文章于 2024-04-30 08:45:20 发布
阅读量297 收藏
点赞数
分类专栏： TypeScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zl_best/article/details/102704864
版权

1. 基础类型定义

//布尔值
let isDone: boolean = false;

//数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

//字符串
let name: string = “Gene”;
let sentence: string = `Hello, my name is ${ name }.`;

//数组
let list: number[] = [1, 2, 3];  //由number类型元素组成的数组
let list: Array<number> = [1, 2, 3];  //数组泛型方式：Array<元素类型>

//元组Tuple《表示一个已知元素数量和类型(不同)的数组》
let x: [string, number];   // Declare a tuple type
x = ['hello', 10]; // Initialize it, OK
x = [10, 'hello']; // Initialize it incorrectly, Error
/* 当访问一个越界的元素，会使用联合类型替代：*/
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

//联合类型(通过管道(|)将变量设置多种类型)
var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

//枚举
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
let colorName: string = Color[2];
console.log(colorName);  // 可由枚举的值2得到它的名字'Green'

//Any(为不清楚类型的变量所指定的类型)
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
let list: any[] = [1, true, "free"];
list[1] = 100;

//Void(没有任何类型)
let unusable: void = undefined;

//Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

//Never(表示永不存在的值类型)
/* 返回never的函数必须存在无法达到的终点 */
function error(message: string): never {
    throw new Error(message);
}
function infiniteLoop(): never {
    while (true) {
    }
}

//Object(非原始类型)
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

//类型断言
/* 尖括号语法形式: */
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
/* as语法形式: */
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2. 函数

  • 可选参数使用问号?标识
function buildName(firstName: string, lastName?: string) {
    ...
}
  • 默认参数使用=赋默认值
function calculate_discount(price:number,rate:number = 0.50) { 
    ...
}
  • 剩余参数是用…为前缀的数组
function buildName(firstName: string, ...restOfName: string[]) {
    ...
}

3. 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现。

  • 接口定义
interface LabelledValue {
  label: string;
  color?: string;  //可选属性
  readonly x: number;  //只读属性
  [propName: string]: any;  //索引签名
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
  • 函数类型：定义一个只有参数类型和返回值类型的函数
interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
  • 接口继承

接口继承是指接口可以通过其他接口来扩展自己。

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

继承实例

//单接口继承
interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

//多接口继承
interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

4. 类

类的数据成员包括：字段、构造函数、方法。

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()
  • 类的继承
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()
  • 访问控制符
  1. public（默认） : 公有，可以在任何地方被访问。
  2. protected : 受保护，可以被其自身以及其子类和父类访问。
  3. private : 私有，只能被其定义所在的类访问。
  • 类和接口
    类可以实现接口，使用关键字implements,并将接口字段作为类的属性使用。
interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

5. 命名空间

命名空间使用namespace来定义。

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

//在另一个命名空间的调用语法格式
SomeNameSpaceName.SomeClassName;

//命名空间在单独的typescript文件中使用三斜杠///引用
/// <reference path = "SomeFileName.ts" />
  • 嵌套命名空间

命名空间支持嵌套，即可以将命名空间定义在另外一个命名空间里头。
成员的访问使用.号来实现。

//Invoice.ts 文件代码：
namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}
//InvoiceTest.ts 文件代码：
/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

6. 模块

模块导出使用关键字export，语法格式为：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

在另一个文件使用该模块需要使用import关键字来导入：

import someInterfaceRef = require("./SomeInterface");

7. 声明文件

声明文件为一个描述js库和模块信息的文件，以.d.ts为后缀，通过引用声明文件，可以借用ts的各种特性来使用库文件。

  • 声明文件或模块的语法格式
declare module Module_Name {
}
//引入声明文件
/// <reference path = " runoob.d.ts" />
  • 声明文件实例
//CalcThirdPartyJsLib.js 文件代码：
var Runoob;  
(function(Runoob) {
    var Calc = (function () { 
        function Calc() { 
        } 
    })
    Calc.prototype.doSum = function (limit) {
        var sum = 0; 
 
        for (var i = 0; i <= limit; i++) { 
            sum = sum + i; 
        }
        return sum; 
    }
    Runoob.Calc = Calc; 
    return Calc; 
})(Runoob || (Runoob = {})); 
var test = new Runoob.Calc();

//对应声明文件 Calc.d.ts代码：
declare module Runoob { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}
//ps: 声明文件不包含实现，它只是类型声明

//CalcTest.ts 文件代码：
/// <reference path = "Calc.d.ts" /> 
var obj = new Runoob.Calc(); 
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));
木槿花开lalala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript 枚举基础
loading.....
08-29 312
数字枚举在没有设置初始值的情况下，第一个成员值默认为 ```0``` 其余成员向下自增长，声明初始值之后，其余未声明初始值成员将基于上一个枚举成员值开始自增长
TypeScript基础
hx_programmer的博客
11-25 1114
TypeScript 是什么? TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 TypeScript有什么作用? JS是弱类型的,没有类型的概念,当你类型写错了的时...
typescript-exercises:一组交互式TypeScript练习
03-19
TypeScript练习 在这里开始您的旅程： : 目标：让每个人都可以使用许多不同的TypeScript功能，并获得TypeScript功能和原理的概述。 覆盖的东西 基本打字。 精炼类型。 联合类型。 合并类型。 泛型。 类型声明。 模块扩充。 高级类型映射。 规则与原则 避免不惜一切代价使用any类型。 难度很快就会逐渐增加。 如果您有任何改进，请随时发送请求请求！ 向这些练习的创建者提供反馈。 享受。 贡献 欢迎您的贡献。 yarn start启动开发服务器。
25 道常见的 TypeScript 面试题及答案
LuckyWinty的博客
03-10 6509
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群编辑整理 | 杨小爱TypeScript 是一种静态类型的、面向对象的编程语言，它是 JavaScript 框架之一，它添加了可选的静态类型和其他功能。它由微软开发和维护，并迅速成为世界上最流行的编程框架之一。因此，在今天这篇文章，...
TypeScript最新高频面试题指南
最新发布
油墨香^-^的博客
04-30 295
装饰器是一种特殊类型的声明，它能过被附加到类声明，方法，属性或者参数上，可以修改类的行为通俗的来说就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数的功能「装饰器的分类」: 类装饰器、属性装饰器、方法装饰器、参数装饰器如果接口用于一个类的话，那么接口会表示“行为的抽象”对类的约束，让类去实现接口，类可以实现多个接口接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法。
TypeScript 常见的面试题（超详细）
贫僧法号依平
03-25 2961
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过添加静态类型类接口和模块等功能，使得在大型应用程序中更容易进行维护和扩展。它可以被编译为纯JavaScript，从而能够在任何支持JavaScript的地方运行。使用TypeScript可以帮助开发人员在编码过程中避免一些常见的错误，并提供更好的代码编辑功能和工具支持。接口是用于描述对象的形状的结构化类型。它定义了对象应该包含哪些属性和方法。
来做做这 48 道 TypeScript 练习题
CSDN for recording problems
03-27 6395
下面所有题目来源于阿宝哥的 awesome-typescript 开源项目，可以点个star😁。 🍔前言 根据以下题目解题中你可以学习了解到并应用的知识点有： 泛型应用 联合类型、交叉类型使用 函数重载 元组 extends分布式条件类型、约束 in关键字 as断言 keyof关键字 infer关键字 -?操作符 -readonly 删除只读符号 循环遍历中属性值类型为never会被省略 [number]获取所有数组类型索引值 与any交叉类型时的情况
TypeScript面试题
weixin_45921734的博客
08-24 5207
TypeScript的一些面试题
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载...
egghead-advanced-typescript-fundamentals:我的“高级TypeScript基础知识” egghead.io课程的代码
05-14
《深入理解：高级TypeScript基础知识》 在编程领域，TypeScript作为JavaScript的超集，以其强大的类型系统和静态检查能力，赢得了广大开发者的青睐。"egghead-advanced-typescript-fundamentals"是一个针对...
TypeScript 知识基础篇
06-01
涵盖了TypeScript 基础类型、变量声明以及接口等知识。
TypeScriptAcademind：TypeScript基础
02-12
**TypeScript基础知识详解** TypeScript是由Microsoft开发的一种强类型、静态类型的编程语言，它是JavaScript的超集，旨在提供更安全、可维护的代码，并且在编译时进行类型检查。TypeScript广泛应用于大型项目和...
IntelliWakeTSFoundation:IntelliWake TypeScript基础
03-07
**TypeScript基础知识** TypeScript是JavaScript的一个超集，由微软开发并维护，它为JavaScript带来了静态类型、类和接口等特性，提升了代码的可维护性和可靠性。本教程将深入讲解TypeScript的基础知识，帮助开发者...
TypeScript的介绍及功能
凯凯凯凯凯凯凯凯
10-31 1557
TypeScript的介绍及功能
TypeScript面试题--持续更新
jyl919221lc的博客
05-31 2467
3.TypeScript类修饰符 4.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型 5.TypeScript接口 6.TypeScript对象和TypeScript接口的区别 类型别名及类型符号csdn详情参考 8.TypeScript字面量类型 字面量类型（Literal Types）用来表示具体的字面量值，包括字符串、数字、布尔值等。它们可以作为类型注解的一部分，用来限制变量、函数参数、函数返回值等的取值范围数字字面量，字符串字面量，布尔字面量,空值字面量,枚举字面量
分享 40 道关于 Typescript 的面试题及其答案
前端达人
11-10 2618
在进行前端技术面试的时候，我们经常会遇到TypeScript 的一些面试题，因此，今天这篇文章，我整理汇总了40道关于TypeScript 的基础知识的面试题。在实际工作中，它的优势在于提高开发人员的工作效率。今天这期内容，主要是对 TypeScript 内容的特定面试题，并提供详细的参考答案、代码示例以及相关的延伸阅读内容。那么，我们现在就开始进入今天的内容吧。1.什么是 TypeScript，...
TypeScript基础知识总结
qq_40046544的博客
09-26 479
TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行# TypeScript 代码：有明确的类型，即：number（数据类型）# JavaScript 代码：无明确的类型let name = '李斯'
Typescript面试题
fmk1023的博客
08-02 734
Typescript面试题
typescript基础知识
08-12
下面是一些 TypeScript 的基础知识： 1. 类型注解：TypeScript 强调变量和函数的类型，你可以使用类型注解来给变量、函数的参数和返回值等指定类型。例如： ```typescript let num: number = 10; function greet...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值