Warm greetings! This lesson introduces data streams, which are essentially continuous datasets. Think of a weather station or gaming application gathering data per second — both generate data streams! We will master handling these data streams using TypeScript
, learning to access elements, slice segments, and convert these streams into strings for easier handling.
In TypeScript
, data streams can be represented using arrays, with additional TypeScript
features like type annotations that improve code readability and robustness.
Consider a straightforward TypeScript
class named DataStream
. This class encapsulates operations related to data streams in our program:
TypeScript1type DataElement = { id: number, value: number }; 2 3class DataStream { 4 data: DataElement[]; 5 6 constructor(data: DataElement[]) { 7 this.data = data; 8 } 9}
To use it, we create a sample data stream as an instance of our DataStream
class, where each element is an object of type DataElement
with two properties, id
and value
:
TypeScript1const stream = new DataStream([ 2 { id: 1, value: 100 }, 3 { id: 2, value: 200 }, 4 { id: 3, value: 300 }, 5 { id: 4, value: 400 } 6]);
To examine individual elements of a data stream, we use indexing. The get()
method we introduce below fetches the i
-th element from the data stream:
TypeScript1type DataElement = { id: number, value: number }; 2 3class DataStream { 4 data: DataElement[]; 5 6 constructor(data: DataElement[]) { 7 this.data = data; 8 } 9 10 get(i: number): DataElement | undefined { 11 return this.data[i]; 12 } 13}
Here, we can see the get()
method in action:
TypeScript1const stream = new DataStream([ 2 { id: 1, value: 100 }, 3 { id: 2, value: 200 }, 4 { id: 3, value: 300 }, 5 { id: 4, value: 400 } 6]); 7 8console.log(stream.get(2)); // It prints: { id: 3, value: 300 } 9console.log(stream.get(-1)); // It prints: undefined
In essence, stream.get(2)
fetched us { id: 3, value: 300 }
— the third element (since indexing starts from 0
). Remember that TypeScript
does not support indexing with negative indexes, so stream.get(-1)
returns undefined
.
Fetching a range of elements rather than a single one is facilitated by slicing. A slice data.slice(i, j)
creates a new array containing elements from position i
(inclusive) to j
(exclusive) in the data stream. We introduce a slice()
method to support slicing:
TypeScript1type DataElement = { id: number, value: number }; 2 3class DataStream { 4 data: DataElement[]; 5 6 constructor(data: DataElement[]) { 7 this.data = data; 8 } 9 10 get(i: number): DataElement | undefined { 11 return this.data[i]; 12 } 13 14 slice(i: number, j: number): DataElement[] { 15 return this.data.slice(i, j); 16 } 17}
Here's a quick usage example:
TypeScript1const stream = new DataStream([ 2 { id: 1, value: 100 }, 3 { id: 2, value: 200 }, 4 { id: 3, value: 300 }, 5 { id: 4, value: 400 } 6]); 7 8console.log(stream.slice(1, 3)); 9// It prints: [{ id: 2, value: 200 }, { id: 3, value: 300 }]
To gain a clearer view of our data, we may wish to convert our data streams into strings. To ensure the conversion works consistently, we will create a custom string representation for our data elements. Have a look at the toString()
method in action:
TypeScript1type DataElement = { id: number, value: number }; 2 3class DataStream { 4 data: DataElement[]; 5 6 constructor(data: DataElement[]) { 7 this.data = data; 8 } 9 10 get(i: number): DataElement | undefined { 11 return this.data[i]; 12 } 13 14 slice(i: number, j: number): DataElement[] { 15 return this.data.slice(i, j); 16 } 17 18 toString(): string { 19 return '[' + this.data.map(item => JSON.stringify(item)).join(', ') + ']'; 20 } 21}
Here's a breakdown:
-
this.data.map(item => JSON.stringify(item))
: This part goes through each item in thedata
array, converts it to a JSON string usingJSON.stringify(item)
, and creates a new array of these JSON string representations. -
.join(', ')
: After converting each item to a JSON string, thejoin(', ')
method takes this array of strings and combines them into a single string, with each element separated by a comma followed by a space. -
'[' + ... + ']'
: Finally, this concatenates the beginning'['
and ending']'
brackets to the joined string, giving a visual representation of an array in string form.
To see it in action:
TypeScript1const stream = new DataStream([ 2 { id: 1, value: 100 }, 3 { id: 2, value: 200 }, 4 { id: 3, value: 300 }, 5 { id: 4, value: 400 } 6]); 7 8console.log(stream.toString()); 9// It prints: [{ "id": 1, "value": 100 }, { "id": 2, "value": 200 }, 10// { "id": 3, "value": 300 }, { "id": 4, "value": 400 }]
In later lessons, we'll expand data stream functionality to include more complex data stream handling capabilities.
In this lesson, we've explored data streams, discovered how to represent and manipulate them using native TypeScript
data structures, especially arrays, and encapsulated operations on data streams with TypeScript
classes equipped with type annotations to enhance code safety and clarity.
Now it's time to apply your newfound knowledge in the practice exercises that follow!