typescript入门，typescript特性

最新推荐文章于 2025-03-02 15:37:59 发布
最新推荐文章于 2025-03-02 15:37:59 发布
阅读量487 收藏
点赞数
分类专栏： typescript 文章标签： typescript compiler angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xcg132566/article/details/76141568
版权 
	typescript的介绍这里就不提，之前文章中有，目前typescript还不能直接运行在浏览器中，所以需要使用compiler进行编译成JavaScript文件进行运行。
/*特性一：字符串新特性*/
/*1、多行字符串*/
var content = `aaa
bbb
ccc`;
*******************************************

 
 

  
  编译出js为：
 
 

 
 

  
  var content = "aaa\nbbb\nccc";
 
 

*******************************************
 
 

  
  

 
 

 
 

  
  /*2、字符串模板*/
var myName = 'xuchg';
var getName = function(){
  return 'xuchg';
};
console.log(`my name is ${myName}`);
console.log(`also ${getName()}`);
 
 

*******************************************
 
 

  
  编译出js为：
 
 

 
 

  
  

   
   var myName = 'xuchg';
  
  

  
  

   
   var getName = function () {
  
  

  
  

   
       return 'xuchg';
  
  

  
  

   
   };
  
  

  
  

   
   console.log("my name is " + myName);
  
  

  
  

   
   console.log("also " + getName());
  
  

  
  

  
  *******************************************
//构建HTML模板
console.log(`
  <div>
    <span>${myName}</span>
    <span>${getName()}</span>
  </div>
`);
  
  

  
  *******************************************
  
  

   
   编译出js为：
  
  

  
  

   
   console.log("\n  <div>\n    <span>" + myName + "</span>\n    <span>" + getName() + "</span>\n  </div>\n");
  
  

  
  

  
  *******************************************
 
 

 
 


  
  /*3、自动拆分字符串*/
function test(temp,name,age){
  console.log(temp);
  console.log(name);
  console.log(age);
}
var myName1 = "xuchg";
var getAge = function(){
  return 23;
}
test`hello my name is ${myName1} I am ${getAge()}`;
 
 

*******************************************
 
 

  
  

   
   编译出js为：
  
  

  
  

   
   

    
    function test(temp, name, age) {
   
   

   
   

    
        console.log(temp);
   
   

   
   

    
        console.log(name);
   
   

   
   

    
        console.log(age);
   
   

   
   

    
    }
   
   

   
   

    
    var myName1 = "xuchg";
   
   

   
   

    
    var getAge = function () {
   
   

   
   

    
        return 23;
   
   

   
   

    
    };
   
   

   
   

    
    (_a = ["hello my name is ", " I am ", ""], _a.raw = ["hello my name is ", " I am ", ""], test(_a, myName1, getAge()));
   
   

   
   

   
   *******************************************
  
  


  
  /*二、参数新特性*/
var myName2:string = "xuchg";
//typescript类型推断
var alias = "hehe";
//报错
// alias = 12;
var alias1:any = "这是一个任意类型";

 
 

 
 

  
  var age:number = 21;
var man:boolean = true;
function testReturn(name:string):string{
  return "这是一个参数和返回值定义类型的方法";
}
//自定义类型
class Person{
  name:string;
  age:number;
}
var xcg:Person = new Person();
xcg.name = "xuchg";
xcg.age = 23;

  
  

   
   

   
   *******************************************
编译出js为：
  
  

  
  


  
  

  
  

   
   

    
    var myName2 = "xuchg";
   
   

   
   

    
    //typescript类型推断
   
   

   
   

    
    var alias = "hehe";
   
   

   
   

    
    //报错
   
   

   
   

    
    // alias = 12;
   
   

   
   

    
    var alias1 = "这是一个任意类型";
   
   

   
   

    
    var age = 21;
   
   

   
   

    
    var man = true;
   
   

   
   

    
    function testReturn(name) {
   
   

   
   

    
        return "这是一个参数和返回值定义类型的方法";
   
   

   
   

    
    }
   
   

   
   

    
    //自定义类型
   
   

   
   

    
    var Person = (function () {
   
   

   
   

    
        function Person() {
   
   

   
   

    
        }
   
   

   
   

    
        return Person;
   
   

   
   

    
    }());
   
   

   
   

    
    var xcg = new Person();
   
   

   
   

    
    xcg.name = "xuchg";
   
   

   
   

    
    xcg.age = 23;
   
   

   
   

   
   *******************************************
  
  

  
  
/*2、参数默认值*/
var myName3:string = "xuchg";
function testVal(a:string,b:string,c:string="这是默认值"){
  console.log(a);
  console.log(b);
  console.log(c);
}//注意：带默认值得参数要声明在最后
testVal("aaa","bbb","CCC");
testVal("aaa","bbb");
  
  

  
  *******************************************
编译出js为：
 
 

 
 

  
  

   
   var myName3 = "xuchg";
  
  

  
  

   
   function testVal(a, b, c) {
  
  

  
  

   
       if (c === void 0) { c = "这是默认值"; }
  
  

  
  

   
       console.log(a);
  
  

  
  

   
       console.log(b);
  
  

  
  

   
       console.log(c);
  
  

  
  

   
   } //注意：带默认值得参数要声明在最后
  
  

 
 

 
 

  
  

  
  *******************************************

 
 

 
 


  
  /*3、可选参数：？*/
function testChange(a:string,b?:string,c:string="这是默认值"){
  console.log(a);
  console.log(b.length);//注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面
  console.log(c);
}
testChange("XXX");
 
 

 
 

  
  

  
  *******************************************
编译出js为：
 
 

 
 


 
 

 
 

  
  

   
   function testChange(a, b, c) {
  
  

  
  

   
       if (c === void 0) { c = "这是默认值"; }
  
  

  
  

   
       console.log(a);
  
  

  
  

   
       console.log(b.length); //注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面
  
  

  
  

   
       console.log(c);
  
  

  
  

   
   }
  
  

  
  

   
   testChange("XXX");
  
  

  
  

   
   

   
   *******************************************

  
  


  
  /*三、函数新特性*/
/*1、rest and spread操作符，就是用来声明任意数量的方法参数，相当于Java的可变参数*/
function rs1(...args){
  args.forEach(function(arg){
    console.log(arg);
  })
}
rs1(1,2,3);
rs1(4,5,6,7,8,9);

  
  

  
  *******************************************
编译出js为：
 
 

 
 

  
  

   
   function rs1() {
  
  

  
  

   
       var args = [];
  
  

  
  

   
       for (var _i = 0; _i < arguments.length; _i++) {
  
  

  
  

   
           args[_i] = arguments[_i];
  
  

  
  

   
       }
  
  

  
  

   
       args.forEach(function (arg) {
  
  

  
  

   
           console.log(arg);
  
  

  
  

   
       });
  
  

  
  

   
   }
  
  

  
  

   
   rs1(1, 2, 3);
  
  

  
  

   
   rs1(4, 5, 6, 7, 8, 9);
  
  

//另一种情况
function rs2(a,b,c){
  console.log(a);
  console.log(b);
  console.log(c);
}
var args = [1,2];
// rs2(...args);
 
 

 
 

  
  

  
  *******************************************


  
  
/*2、generator函数，控制函数的执行过程，手工暂停和恢复代码的执行，只支持ES6*/
function* doThing(){
  console.log("start");
  yield;
  console.log("finish");
}
var func = doThing();
func.next();
func.next();

  
  

  
  *******************************************
编译出js为：
 
 

 
 

  
  

   
   function doThing() {
  
  

  
  

   
       return __generator(this, function (_a) {
  
  

  
  

   
           switch (_a.label) {
  
  

  
  

   
               case 0:
  
  

  
  

   
                   console.log("start");
  
  

  
  

   
                   return [4 /*yield*/];
  
  

  
  

   
               case 1:
  
  

  
  

   
                   _a.sent();
  
  

  
  

   
                   console.log("finish");
  
  

  
  

   
                   return [2 /*return*/];
  
  

  
  

   
           }
  
  

  
  

   
       });
  
  

  
  

   
   }
  
  

  
  

   
   var func = doThing();
  
  

  
  

   
   func.next();
  
  

  
  

   
   func.next();
  
  

  
  

  
  *******************************************


  
  /*3、destructuring析构表达式，是通过表达式将对象或数组进行拆解成任意数量的变量*/
function getStock(){
  //返回一个对象
  return {
    nameVal:'xuchg',
    ageVal:23
  }
}
//以下为js中的写法，以作对比
var stock = getStock();
var name1 = stock.nameVal;
var age1 = stock.ageVal;


//typescript的写法
var {nameVal,ageVal} = getStock();
console.log(nameVal);
console.log(ageVal);
//析构表达式接受的变量名必须和返回对象的变量名相同


//析构表达式从数组中取值
var arr = [1,2,4];
var [num1,num2,...otherNum] = arr;
console.log(num1);
console.log(num2);
console.log(otherNum);


//用在方法上
function doSomeThing([num1,num2,...otherNum]){
  console.log(num1);
  console.log(otherNum);
}
doSomeThing(arr);//拆分参数变量

  
  

  
  *******************************************
编译出js为：
 
 

 
 

  
  

  
  

   
   function getStock() {
  
  

  
  

   
       //返回一个对象
  
  

  
  

   
       return {
  
  

  
  

   
           nameVal: 'xuchg',
  
  

  
  

   
           ageVal: 23
  
  

  
  

   
       };
  
  

  
  

   
   }
  
  

  
  

   
   //以下为js中的写法，以作对比
  
  

  
  

   
   var stock = getStock();
  
  

  
  

   
   var name1 = stock.nameVal;
  
  

  
  

   
   var age1 = stock.ageVal;
  
  

  
  

   
   //typescript的写法
  
  

  
  

   
   var _b = getStock(), nameVal = _b.nameVal, ageVal = _b.ageVal;
  
  

  
  

   
   console.log(nameVal);
  
  

  
  

   
   console.log(ageVal);
  
  

  
  

   
   //析构表达式接受的变量名必须和返回对象的变量名相同
  
  

  
  

   
   //析构表达式从数组中取值
  
  

  
  

   
   var arr = [1, 2, 4];
  
  

  
  

   
   var num1 = arr[0], num2 = arr[1], otherNum = arr.slice(2);
  
  

  
  

   
   console.log(num1);
  
  

  
  

   
   console.log(num2);
  
  

  
  

   
   console.log(otherNum);
  
  

  
  

   
   //用在方法上
  
  

  
  

   
   function doSomeThing(_a) {
  
  

  
  

   
       var num1 = _a[0], num2 = _a[1], otherNum = _a.slice(2);
  
  

  
  

   
       console.log(num1);
  
  

  
  

   
       console.log(otherNum);
  
  

  
  

   
   }
  
  

  
  

   
   doSomeThing(arr); //拆分参数变量
  
  

  
  

   
   var _a;
  
  

  
  

  
  *******************************************
TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装
qq_43456781的博客
10-24 3759
TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装 文章目录TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装1. 什么是 TypeScriptTypeScript 的特性类型系统TypeScript 是静态类型TypeScript 是弱类型适用于任何规模与标准同步发展总结2. 安装 TypeScript编辑器3. Hello TypeScript 网址：https://ts.xcatliu.com/ 1. 什么是
Typescript特性
亚丝娜
06-22 509
Typescript是Javascript的超集，说白了——Typescript在Javascript的基础上进行了扩展，增加了一些特性。 字符串变量的反撇号——` 用键盘左上角的反撇号——`，将字符串包裹起来，可以插入多行的字符串； 用反撇号引用的字符串里面可以插入函数的调用； 自动拆分字符串。这一点比较强大，不过可能不太直观，别人看起来有点麻烦。 参数类型声明 用冒号定义变量类型：用var或者let声明变量后，用冒号间隔后可以定义变量类型。这相当于把javascript的弱类型语言变成了Types
浅谈 TypeScript 特性 （二）
萧萧的博客
07-02 2147
浅谈 TypeScript 特性 ＊ 　类型推论 1. 如果没有声明类型 typescript 会推论出一个通用类型, 如下是 a会被推论出为 string[]  const a = [1,2,3] const a2 = a[0]; 2. 如果表达式是如下, 是会报错的， 因为此时没有找到最佳通用类型, 类型的推论的结果将是空对象{} 故访问其成员会报错 co
TypeScript 入门到进阶教程
秦若宸 - 全栈工程师，擅长前端技术与架构设计。
03-02 1269
TypeScript 是 JavaScript 的超集，它添加了静态类型和一些其他特性，使得开发大型应用程序变得更加容易和可靠。TypeScript 是一个强大的工具，它通过静态类型检查和丰富的语言特性，使得开发大型应用程序变得更加容易和可靠。本教程涵盖了从基础到高级的 TypeScript 知识，希望能够帮助你更好地理解和使用 TypeScript。随着你对 TypeScript 的深入学习，你会发现它不仅仅是 JavaScript 的超集，更是一种能够提高代码质量和开发效率的工具。
TypeScript的特性
guochan502的博客
10-11 1233
什么是TypeScript 从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。 我们知道，JavaScript 是一门非常灵活的编程语言： 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。 函数是 JavaScript 中的一等公民[2]，可以赋值给变量，也可以当作参数或返回值。 这种灵活性就像一把双刃剑，一方面使得 Ja..
Typescript 特性
datouxiang的博客
10-28 178
1.类型注解: 为函数和变量添加约束的方式 function sayHello(name : string) { return "Hello, " + name ; } let name = "shu xiaoxiao"; greeter(name); //调用结果：Hello, shu xiaoxiao 2.接口 ： 使用接口来描述一个拥有具体字段的对象，要求我们在实现接口时候包含了接口要求的结构 interface Gril{ firstName: stri..
TypeScript入门教程——pdf文档
03-16
**TypeScript 入门教程** TypeScript 是一种由微软开发的强类型、静态类型的超集语言，它在 JavaScript 的基础上增加了许多新特性，如...阅读提供的 "TypeScript入门教程——pdf文档"，将能更全面地掌握这些知识点。
TypeScript 入门教程
最新发布
03-13
TypeScript引入了如类Classes、接口Interfaces、模块Modules、类型注解Type annotations以及编译时类型检查Compile time type checking等特性，并且支持了类似C#中的Lambda表达式的Arrow函数。这些特性在JavaScript...
前端开发之TypeScript入门指南：特性解析与实战应用
03-13
内容概要：本文主要介绍 TypeScript 的基础概念及其关键特性和实际应用场景，从何为 TypeScript 开始，逐步解释安装方式、基础类型、函数与接口、面向对象编程、泛型、模块化以及配置文件等内容。每个部分都通过具体...
TypeScript简介及语言特性
friend_ship的博客
05-31 1123
简介 TypeScript对我们来说可能有点儿陌生，我们可以先简单的介绍下JS，它是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，是数据类型可以被忽略的语言，一个变量可以赋不同类型的值，俗称弱类型语言。TypeScript是一种强类型语言。 // JavaScript的demo案例 var a = "abc"; a = 123; console.log(`a: ${a}`); // a: 123 TypeScript的语言特性 与现存的JavaScript代码有非常高的兼容性。TypeScri
TS和JS的区别，使用TS的好处
尖尖角的博客
01-25 8013
TS和JS的区别，使用TS的好处Typescript和JavaScript的区别JavascriptTypescript使用typescript的好处 Typescript和JavaScript的区别 Typescript是JavaScript的 超集，它支持所有JavaScript的语法，并具有自己的类型系统。最终编译成JavaScript运行。 Javascript 动态类型，运行时明确变量的类型，变量的类型由变量的值决定，并跟随值的改变而改变； 直接运行在浏览器和node.js环境中； 弱类型，数据
TypeScript 的主要特点是什么？
weixin_45087659的博客
12-29 1162
跨平台：TypeScript 编译器可以安装在任何操作系统上，包括 Windows、macOS 和 Linux ES6特性：TypeScript 包含计划中的 ECMAScript 2015（ES6）的大部分特性，例如：箭头函数 面向对象的语言：TypeScript 提供所有标准的 OOP 功能，如类、接口和模块 静态类型检查：TypeScript 使用静态类型并帮助在编译时进行类检查。因此，你可以在编写代码时发现编译时错误，而无需运行脚本 可选的静态类型：如果你习惯了 JavaScript 的动态类型..
TypeScript 的特点
qq_52433276的博客
05-10 423
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。TypeScript 可以编译出纯净、简洁的 JavaScript 代码，并且可以运行在何浏览器上Node.js 环境中和任何支持 ECMAScript 3 (或更高版本)的JavaScript 引警中。始于JavaScript，归于JavaScript。先进的 JavaScript。
TypeScript 几个特点
bobocode1的博客
03-07 3138
特点 typeScript 是 javascript 的超集，扩展了语法类 Classes 接口 interfaces 模块 Modules 类型注解 Type annotaions 编译时类型检查 Compile time type checking Arrow函数(类似c#的Lambda) 类型批注 function Add(left :number,right :number) :numbe
TypeScript函数的一些特性
Meskjei的博客
04-01 506
文章目录函数返回值类型never类型解构赋值 函数返回值类型 function getSum(a: number, b: number): number { return a + b; } 在参数声明后面的“: number”就是指明了函数返回值的类型。理论上是可以不用添加的，因为TypeScript可以进行类型推断，从而推断出该函数的返回值类型是number。 但是，在开发中还是加上的好，...
分享 40 道关于 Typescript 的面试题及其答案
前端达人
11-10 3393
在进行前端技术面试的时候，我们经常会遇到TypeScript 的一些面试题，因此，今天这篇文章，我整理汇总了40道关于TypeScript 的基础知识的面试题。在实际工作中，它的优势在于提高开发人员的工作效率。今天这期内容，主要是对 TypeScript 内容的特定面试题，并提供详细的参考答案、代码示例以及相关的延伸阅读内容。那么，我们现在就开始进入今天的内容吧。1.什么是 TypeScript，...
typescript
Shirley_0513的博客
08-31 202
安装ts版本的react项目 create-react-app myapp --typescript 一，声明数据类型 var myname:string="" var my:string|number|boolean =12 var munumber:number= 0 var mybool:boolean = true var arr1:string[] = ['111','222','333'] var arr2 :(string|number)[] = [1,'aaa','bbb',2] 二，定
TypeScript入门教程：特性与实战指南
"本资源为TypeScript快速上手教程，旨在引导学习者了解并掌握TypeScript的基本特性和用法。TypeScript是由微软开发的一种开源编程语言，由Anders Hejlsberg领导团队进行设计，它是JavaScript的一个超集，旨在添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值