-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtypescript_basic.html
More file actions
152 lines (152 loc) · 35.3 KB
/
typescript_basic.html
File metadata and controls
152 lines (152 loc) · 35.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>TypeScript Introduction - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="TypeScript is a Microsoft language (released in 2012) and a superset of JavaScript. It compiles to JavaScript and adds static typing and class-based object-oriented features."><meta name=keywords content="TypeScript,JavaScript,static typing,type annotations,classes,interfaces"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/typescript_basic.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/typescript_basic.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="TypeScript Introduction"><meta property="og:description" content="TypeScript is a Microsoft language (released in 2012) and a superset of JavaScript. It compiles to JavaScript and adds static typing and class-based object-oriented features."><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-07-16T21:43:35+08:00"><meta property="article:modified_time" content="2017-07-16T21:43:35+08:00"><meta property="article:tag" content="TypeScript"><meta itemprop=name content="TypeScript Introduction"><meta itemprop=description content="TypeScript is a Microsoft language (released in 2012) and a superset of JavaScript. It compiles to JavaScript and adds static typing and class-based object-oriented features."><meta itemprop=datePublished content="2017-07-16T21:43:35+08:00"><meta itemprop=dateModified content="2017-07-16T21:43:35+08:00"><meta itemprop=wordCount content="1110"><meta itemprop=keywords content="TypeScript,JavaScript,static typing,type annotations,classes,interfaces"><meta name=twitter:card content="summary"><meta name=twitter:title content="TypeScript Introduction"><meta name=twitter:description content="TypeScript is a Microsoft language (released in 2012) and a superset of JavaScript. It compiles to JavaScript and adds static typing and class-based object-oriented features."><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>TypeScript Introduction</h1><div class=post-meta><span class=post-time>2017-07-16</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>1110 words </span><span class=more-meta>6 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#1-introduction>1. Introduction</a></li><li><a href=#2-install-typescript>2. Install TypeScript</a></li><li><a href=#3-compile>3. Compile</a></li><li><a href=#4-editor-visual-studio-code>4. Editor: Visual Studio Code</a></li><li><a href=#5-language-feature-type-annotations>5. Language Feature: Type Annotations</a></li><li><a href=#6-language-feature-interfaces>6. Language Feature: Interfaces</a></li><li><a href=#7-language-feature-classes>7. Language Feature: Classes</a><ul><li><a href=#71-defining-a-class>7.1 Defining a class</a></li><li><a href=#72-instantiation>7.2 Instantiation</a></li><li><a href=#73-inheritance>7.3 Inheritance</a></li><li><a href=#74-access-modifiers>7.4 Access Modifiers</a></li></ul></li></ul></nav></div></div><div class=post-content><h2 id=1-introduction>1. Introduction</h2><p><a href=http://www.typescriptlang.org/>TypeScript</a> is a Microsoft language released in 2012. It is a <code>superset</code> of JavaScript, compiles to JavaScript, and adds optional static typing plus class-based object-oriented capabilities.</p><p>TypeScript files have the extension <code>.ts</code>.</p><p>TypeScript cannot run directly in the browser environment. It needs to be compiled into JavaScript before running in the browser.</p><p>TypeScript is the officially recommended language for <code>Angular 2</code> development. It can also be used as a development language for projects using frameworks or class libraries such as React, Vue, and ReactNative.</p><p>A minimal TypeScript example (<code>demo.ts</code>):</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>book</span>: <span style=color:#66d9ef>string</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>"Angular 2"</span>; <span style=color:#75715e>// Defines a variable book of string type
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>num</span>: <span style=color:#66d9ef>number</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>123</span>; <span style=color:#75715e>// Defines a variable num of type number
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>: <span style=color:#66d9ef>string</span>)<span style=color:#f92672>:</span> <span style=color:#66d9ef>void</span> { <span style=color:#75715e>// A function log is defined, and its parameter msg is of type string. `:void` means that this function has no return value.
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>);
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><h2 id=2-install-typescript>2. Install TypeScript</h2><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-shell data-lang=shell><span style=display:flex><span>npm install -g typescript
</span></span></code></pre></div><h2 id=3-compile>3. Compile</h2><p>3.1 Local compilation: run <code>tsc <file>.ts</code> to generate a JavaScript file with the same base name.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-shell data-lang=shell><span style=display:flex><span>tsc demo.ts
</span></span></code></pre></div><p>After compiling <code>demo.ts</code>, you get <code>demo.js</code>:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>book</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>"Angular 2"</span>;
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>num</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>123</span>;
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>);
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><p>3.2 Online compilation: TypeScript provides an official <a href=http://www.typescriptlang.org/play/index.html>online playground</a>.</p><h2 id=4-editor-visual-studio-code>4. Editor: Visual Studio Code</h2><p>Microsoft officially provides a lightweight but powerful editor for TypeScript - <a href=https://code.visualstudio.com/>VS Code</a>. Visual Studio Code is a lightweight editor, and with extensions it provides many of Visual Studio’s advanced capabilities.</p><h2 id=5-language-feature-type-annotations>5. Language Feature: Type Annotations</h2><p>Type annotations in TypeScript are a lightweight way to add constraints to functions or variables.</p><p>In the example code, we want the log function to receive a string parameter. Then try changing the call to log to pass in an array:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#e6db74>"Hello, "</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>msg</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>msg</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>0</span>, <span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>);
</span></span></code></pre></div><p>TypeScript provides static code analysis, which can analyze the code structure and provided type annotations. Therefore, the above code will prompt an error in VS Code:</p><p>Argument of type ’number[]’ is not assignable to parameter of type string</p><h2 id=6-language-feature-interfaces>6. Language Feature: Interfaces</h2><p>One of the core principles of TypeScript is type checking the structure that a value has. It is sometimes called “duck typing” or “structural subtyping”.</p><p>In TypeScript, the role of interfaces is to name these types and define contracts for your code or third-party code.</p><p>Simple example:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>print</span>(<span style=color:#a6e22e>obj</span><span style=color:#f92672>:</span> { <span style=color:#a6e22e>a</span>: <span style=color:#66d9ef>string</span> }) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>obj</span>.<span style=color:#a6e22e>a</span>);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>myObj</span> <span style=color:#f92672>=</span> {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>size</span>: <span style=color:#66d9ef>10</span>,
</span></span><span style=display:flex><span> <span style=color:#a6e22e>a</span><span style=color:#f92672>:</span> <span style=color:#e6db74>"Size 10 Object"</span>
</span></span><span style=display:flex><span>};
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>print</span>(<span style=color:#a6e22e>myObj</span>);
</span></span></code></pre></div><p>The type checker looks at calls to the function print(). It has an object parameter, and this object parameter has a property named a, of type string. It should be noted that the object parameter we pass in will actually contain many properties, but the compiler will only check whether those required properties exist and whether their types match.</p><p>Use the <code>interface</code> keyword to define contracts. By convention, interface names are PascalCase.</p><p>Rewriting the example with an <code>interface</code>:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>interface</span> <span style=color:#a6e22e>MyValue</span> {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>a</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>print</span>(<span style=color:#a6e22e>obj</span>: <span style=color:#66d9ef>MyValue</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>obj</span>.<span style=color:#a6e22e>a</span>);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>myObj</span> <span style=color:#f92672>=</span> {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>size</span>: <span style=color:#66d9ef>10</span>,
</span></span><span style=display:flex><span> <span style=color:#a6e22e>a</span><span style=color:#f92672>:</span> <span style=color:#e6db74>"Size 10 Object"</span>
</span></span><span style=display:flex><span>};
</span></span><span style=display:flex><span><span style=color:#a6e22e>print</span>(<span style=color:#a6e22e>myObj</span>);
</span></span></code></pre></div><h2 id=7-language-feature-classes>7. Language Feature: Classes</h2><h3 id=71-defining-a-class>7.1 Defining a class</h3><p>Before ES2015, JavaScript used prototype-based inheritance without <code>class</code> syntax. ES2015 introduced classes, and TypeScript builds on that model with stronger typing.</p><p>Sample code:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Greeter</span> {
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Defines properties of string type,
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>greeting</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Defines the constructor of the class, whose parameters are of type string
</span></span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>message</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>greeting</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>message</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// defines a class method
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>greet() {</span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#e6db74>"Hello, "</span> <span style=color:#f92672>+</span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>greeting</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><p>The above code declares a Greeter class. This class has 3 members: a property called greeting, a constructor, and a greet method.</p><p>We use <code>this</code> when referencing any class member, which indicates that we are accessing a member of the class.</p><h3 id=72-instantiation>7.2 Instantiation</h3><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>greeter</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Greeter</span>(<span style=color:#e6db74>"world"</span>);
</span></span></code></pre></div><p>An instance of the Greeter class is created using <code>new</code>. It will call the previously defined constructor, create a new object of type Greeter, and execute the constructor to initialize it.</p><h3 id=73-inheritance>7.3 Inheritance</h3><p>Sample code:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Animal</span> {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>name</span>:<span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>theName</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>theName</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#a6e22e>move</span>(<span style=color:#a6e22e>distanceInMeters</span>: <span style=color:#66d9ef>number</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>0</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#e6db74>`</span><span style=color:#e6db74>${</span><span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span><span style=color:#e6db74>}</span><span style=color:#e6db74> moved </span><span style=color:#e6db74>${</span><span style=color:#a6e22e>distanceInMeters</span><span style=color:#e6db74>}</span><span style=color:#e6db74>m.`</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Snake</span> <span style=color:#66d9ef>extends</span> <span style=color:#a6e22e>Animal</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>super</span>(<span style=color:#a6e22e>name</span>); <span style=color:#75715e>// The super() method must be called to execute the constructor of the parent class
</span></span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#a6e22e>move</span>(<span style=color:#a6e22e>distanceInMeters</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>5</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#e6db74>"Slithering..."</span>);
</span></span><span style=display:flex><span> <span style=color:#66d9ef>super</span>.<span style=color:#a6e22e>move</span>(<span style=color:#a6e22e>distanceInMeters</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Horse</span> <span style=color:#66d9ef>extends</span> <span style=color:#a6e22e>Animal</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>super</span>(<span style=color:#a6e22e>name</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#a6e22e>move</span>(<span style=color:#a6e22e>distanceInMeters</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>45</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#e6db74>"Galloping..."</span>);
</span></span><span style=display:flex><span> <span style=color:#66d9ef>super</span>.<span style=color:#a6e22e>move</span>(<span style=color:#a6e22e>distanceInMeters</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>sam</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Snake</span>(<span style=color:#e6db74>"Sammy the Python"</span>);
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>tom</span>: <span style=color:#66d9ef>Animal</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Horse</span>(<span style=color:#e6db74>"Tommy the Palomino"</span>);
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>sam</span>.<span style=color:#a6e22e>move</span>();
</span></span><span style=display:flex><span><span style=color:#a6e22e>tom</span>.<span style=color:#a6e22e>move</span>(<span style=color:#ae81ff>34</span>);
</span></span></code></pre></div><p>Similar to other languages, TypeScript uses the keyword <code>extends</code> to create subclasses. You can see that both Horse and Snake are subclasses of Animal and have access to its properties and methods.</p><p>A derived class that contains a constructor must call <code>super()</code>, which will execute the parent class’s constructor.</p><p>Methods of the parent class can be overridden in subclasses. In the above code, both Snake class and Horse class create move methods, which override the move method inherited from Animal, so that the move method has different functions according to different classes.</p><h3 id=74-access-modifiers>7.4 Access Modifiers</h3><p>7.4.1 <code>public</code> (default)</p><p>If no <code>modifier</code> is used to modify the members (properties, methods) of the class, the default is <code>public</code>, which means that we can freely access this member of the class.</p><p>7.4.2 <code>private</code></p><p>When a member is marked <code>private</code>, it cannot be accessed <code>outside</code> the class in which it is declared.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Animal</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>private</span> <span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>theName</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>theName</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Animal</span>(<span style=color:#e6db74>"Cat"</span>).<span style=color:#a6e22e>name</span>; <span style=color:#75715e>// Error: 'name' is private;
</span></span></span></code></pre></div><p>7.4.3 <code>protected</code></p><p>The <code>protected</code> modifier behaves very similarly to the <code>private</code> modifier, but with one difference, <code>protected</code> members are still accessible in <code>derived classes</code>.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Person</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>protected</span> <span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>name</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Employee</span> <span style=color:#66d9ef>extends</span> <span style=color:#a6e22e>Person</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>private</span> <span style=color:#a6e22e>department</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>, <span style=color:#a6e22e>department</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>super</span>(<span style=color:#a6e22e>name</span>)
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>department</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>department</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>public</span> <span style=color:#a6e22e>getElevatorPitch() {</span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#e6db74>`Hello, my name is </span><span style=color:#e6db74>${</span><span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span><span style=color:#e6db74>}</span><span style=color:#e6db74> and I work in </span><span style=color:#e6db74>${</span><span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>department</span><span style=color:#e6db74>}</span><span style=color:#e6db74>.`</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>howard</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Employee</span>(<span style=color:#e6db74>"Howard"</span>, <span style=color:#e6db74>"Sales"</span>);
</span></span><span style=display:flex><span><span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>howard</span>.<span style=color:#a6e22e>getElevatorPitch</span>());
</span></span><span style=display:flex><span><span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>howard</span>.<span style=color:#a6e22e>name</span>); <span style=color:#75715e>// error
</span></span></span></code></pre></div><p>We cannot use name outside the Person class, but we can still access it through the instance methods of the Employee class because Employee is derived from Person.</p><p>7.4.4 <code>readonly</code></p><p>You can use the <code>readonly</code> keyword to set a property to <code>read-only</code>. Read-only properties must be initialized at declaration time or in the constructor.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>class</span> <span style=color:#a6e22e>Octopus</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>readonly</span> <span style=color:#a6e22e>name</span>: <span style=color:#66d9ef>string</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>readonly</span> <span style=color:#a6e22e>numberOfLegs</span>: <span style=color:#66d9ef>number</span> <span style=color:#f92672>=</span> <span style=color:#ae81ff>8</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span> (<span style=color:#a6e22e>theName</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>this</span>.<span style=color:#a6e22e>name</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>theName</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>let</span> <span style=color:#a6e22e>dad</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Octopus</span>(<span style=color:#e6db74>"Man with the 8 strong legs"</span>);
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>dad</span>.<span style=color:#a6e22e>name</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>"Man with the 3-piece suit"</span>; <span style=color:#75715e>// error! name is readonly.
</span></span></span></code></pre></div></div><footer class=post-footer><div class=post-tags><a href=/en/tags/typescript/>TypeScript</a></div><nav class=post-nav><a class=prev href=/nvm_for_window.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">NVM for Windows</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/angular2_basic.html><span class="next-text nav-default">Angular 2 Basics</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>